Major struggles with npm / grunt / node-sass when working with old and new FP projects simultaneously #553

dberz · 2015-11-17T19:31:55Z

Hello -

I've build a handful of production sites of this amazing framework but I'm having major issues working in these different projects at the same time. I'm new to node / npm / node-sass / etc and am receiving a wide variety of command line errors when trying to work on projects new and old.

For example:

—-

NEW PROJECT ERRORS:

I receive the following errors when following the QuickStart guide on github:

npm ERR! Darwin 13.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.2
npm ERR! npm  v2.14.7
npm ERR! code ELIFECYCLE
npm ERR! foundationpress@1.7.0 postinstall: `bower install && grunt build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the foundationpress@1.7.0 postinstall script 'bower install && grunt build'.
npm ERR! This is most likely a problem with the foundationpress package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     bower install && grunt build
npm ERR! You can get their info via:
npm ERR!     npm owner ls foundationpress
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Applications/MAMP/htdocs/parsley/wp-content/themes/Parsley01/npm-debug.log

——

OLD PROJECT ERRORS:

One major project is based on a version of FoundationPress from about 6 months ago. My issues began when I received errors as follows:

$ grunt

Loading "sass.js" tasks...ERROR
>> Error: Module did not self-register.

Running "watch" task
Waiting...OK
>> File "scss/custom/_global.scss" changed.

Loading "sass.js" tasks...ERROR
>> Error: Module did not self-register.
Warning: Task "sass" not found. Use --force to continue.

——

In attempt to fix this, I attempted to re-install npm, which also resulted in errors.

$ sudo NPM install -g n

Password:
Error: Cache dir is required
    at CachingRegistryClient.RegClient (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/index.js:49:33)
    at new CachingRegistryClient (/usr/local/lib/node_modules/npm/lib/cache/caching-client.js:20:18)
    at /usr/local/lib/node_modules/npm/lib/npm.js:363:22
    at /usr/local/lib/node_modules/npm/lib/config/core.js:82:7
    at Array.forEach (native)
    at /usr/local/lib/node_modules/npm/lib/config/core.js:81:13
    at f (/usr/local/lib/node_modules/npm/node_modules/once/once.js:16:25)
    at finalize (/usr/local/lib/node_modules/npm/lib/config/core.js:200:5)
    at afterExtras (/usr/local/lib/node_modules/npm/lib/config/core.js:191:5)
    at /usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:48:26
npm ERR! Darwin 13.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/NPM" "install" "-g" "n"
npm ERR! node v4.2.1
npm ERR! npm  v1.4.28

npm ERR! Cache dir is required
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

——

I then reinstalled node.js (which included nom) and attempted to install node-sass:

$ sudo npm install node-sass

> spawn-sync@1.0.14 postinstall /Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth/node_modules/node-sass/node_modules/cross-spawn/node_modules/spawn-sync
> node postinstall

/
> node-sass@3.4.2 install /Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth/node_modules/node-sass/vendor/darwin-x64-46/binding.node

> node-sass@3.4.2 postinstall /Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth/node_modules/node-sass
> node scripts/build.js

` /Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth/node_modules/node-sass/vendor/darwin-x64-46/binding.node ` exists. 
 testing binary.
Binary is fine; exiting.
npm WARN unmet dependency /Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth/node_modules/grunt-sass requires node-sass@'1.2.3' but will load
npm WARN unmet dependency /Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth/node_modules/node-sass,
npm WARN unmet dependency which is version 3.4.2
node-sass@3.4.2 node_modules/node-sass
├── get-stdin@4.0.1
├── async-foreach@0.1.3
├── nan@2.1.0
├── mkdirp@0.5.1 (minimist@0.0.8)
├── chalk@1.1.1 (supports-color@2.0.0, escape-string-regexp@1.0.3, ansi-styles@2.1.0, has-ansi@2.0.0, strip-ansi@3.0.0)
├── gaze@0.5.2 (globule@0.1.0)
├── glob@5.0.15 (path-is-absolute@1.0.0, inherits@2.0.1, once@1.3.2, inflight@1.0.4, minimatch@3.0.0)
├── cross-spawn@2.0.0 (cross-spawn-async@2.0.0, spawn-sync@1.0.14)
├── npmconf@2.1.2 (ini@1.3.4, uid-number@0.0.5, inherits@2.0.1, semver@4.3.6, once@1.3.2, osenv@0.1.3, nopt@3.0.6, config-chain@1.1.9)
├── node-gyp@3.1.0 (graceful-fs@4.1.2, semver@5.0.3, which@1.2.0, fstream@1.0.8, osenv@0.1.3, nopt@3.0.6, minimatch@1.0.0, tar@2.2.1, glob@4.5.3, rimraf@2.4.3, npmlog@1.2.1, path-array@1.0.0)
├── meow@3.6.0 (object-assign@4.0.1, trim-newlines@1.0.0, minimist@1.2.0, camelcase-keys@2.0.0, loud-rejection@1.2.0, redent@1.0.0, normalize-package-data@2.3.5, read-pkg-up@1.0.1)
├── request@2.65.0 (aws-sign2@0.6.0, forever-agent@0.6.1, tunnel-agent@0.4.1, oauth-sign@0.8.0, caseless@0.11.0, stringstream@0.0.5, isstream@0.1.2, json-stringify-safe@5.0.1, extend@3.0.0, tough-cookie@2.2.1, node-uuid@1.4.7, qs@5.2.0, combined-stream@1.0.5, http-signature@0.11.0, bl@1.0.0, mime-types@2.1.7, hawk@3.1.1, form-data@1.0.0-rc3, har-validator@2.0.2)
└── sass-graph@2.0.1 (lodash@3.10.1, yargs@3.30.0)

This ran with warnings, and when attempting to run grunt again, I received a failure:

$ grunt

Running "watch" task
Waiting...OK
>> File "scss/custom/_global.scss" changed.

Running "sass:dist" (sass) task
Fatal error: sass.renderFile is not a function

——

my current node version is v4.2.2
my current npm version is v2.14.7
I'm on a mac, OS v 10.9.5

——

I would greatly appreciate any advice towards my specific situation, as well as best practices regarding working on old and new FoundationPress projects. Given the frequent and substantive changes to the FoundationPress codebase I fear that I won’t always be able to keep all projects 100% up to date - so I need a way to work on both new and old projects simultaneously.

Thank you!

The text was updated successfully, but these errors were encountered:

Aetles · 2015-11-17T21:07:41Z

Can't give you any help right now, but I familiar with the situation. I'm currently trying to convert an old FP project to use the new workflow with npm scripts and local dependencies, and I'm running into one error after another. (The fact that I have upgraded to OS X El Capitan does not help either because the new System Integrity Protection causes some changes as well.)

I am probably making it harder for me since I won't fall back to using any global dependencies, because I really think the new way is the better way forward. But man, it's frustrating sometimes. There is so many tools in this chain and each can cause their own problems.

swthate · 2015-11-17T22:30:11Z

dberz, I'm having the same problem. Just started today.

Only differences on my end are:

npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.0
npm ERR! npm  v2.7.1
npm ERR! code ELIFECYCLE

And my FoundationPress version for this project is 1.0.0 and running OS X 10.10.5.

I had to move my project to a new repo for some annoying reasons, and realized grunt disappeared in the process. Ran into this error when I tried copy/pasting the grunt and package.json files over to the new repo and running npm install.

Is the only fix for this to grab a fresh, up-to-date version of FP and start styling that one?

dberz · 2015-11-18T17:04:11Z

@swthate It took some sleuthing but I was able to configure a new working FoundationPress build. Note, I still cannot work on critical projects based on old FoundationPress versions.

Steps that I took to get a new FoundationPress project up and running:

I didn't have proper folder permissions. So per this issue (npm postinstall "npm WARN cannot run in wd" npm/npm#3497) I had to run: "sudo chown -R username /usr/local" and "sudo chown -R username /Users/username"
I had to run npm as sudo: "sudo npm install"
Yet, the bower_components folder did not automatically appear for me. So per this issue (Error while running npm run watch #375) I ran "sudo npm install bower -g" and "bower install".

Quite a bit of effort but it works!

However, I still cannot work on my old FoundationPress projects and would love solutions on how to make those work too!

My latest error:

$ grunt

Running "watch" task
Waiting...OK
>> File "scss/config/_custom-settings.scss" changed.

Running "sass:dist" (sass) task
Fatal error: sass.renderFile is not a function
Completed in 0.651s at Wed Nov 18 2015 12:01:41 GMT-0500 (EST) - Waiting...

olefredrik · 2015-11-18T19:16:09Z

@dberz : If your dev environment is set up to work with FoundationPress 1.7.0, it should be really easy to build older projects using older versions of FoundationPress.

Here is what I did.

Download the source code for FoundationPress v1.0.0 and extract this to my themes folder
Copy the most recent Gruntfile.js and package.json and replace them with the older ones in the FoundationPress v1.0.0 directory
Open terminal and navigate to the FoundationPress v1.0.0 directory and do a npm install

Works great on OSX 10.11.1, node v4.2.1, npm v2.14.7.

After npm install it's possible to do npm run build and npm run watch without any errors.

@swthate : I don't think node v.0.12.0 is supported anymore, so I would recommend an update.

Let me know how it goes.

dberz · 2015-11-18T20:45:23Z

@olefredrik : Many thanks for the help.

This does not work for me though. Here's the error:

FoundationPress-1.0.0 username$ sudo npm install

npm WARN deprecated pangyp@2.3.3: use node-gyp@3+ instead
npm WARN peerDependencies The peer dependency sshpk@^1.4.6 included from http-signature will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
|
> node-sass@3.2.0 install /Applications/MAMP/htdocs/parsley/wp-content/themes/FoundationPress-1.0.0/node_modules/node-sass
> node scripts/install.js

Cannot download "https://github.com/sass/node-sass/releases/download/v3.2.0/darwin-x64-46_binding.node": HTTP error 404 Not Found

> node-sass@3.2.0 postinstall /Applications/MAMP/htdocs/parsley/wp-content/themes/FoundationPress-1.0.0/node_modules/node-sass
> node scripts/build.js

Building: /usr/local/bin/node node_modules/pangyp/bin/node-gyp rebuild --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp: /Users/berzind/.node-gyp/4.2.2/common.gypi not found (cwd: /Applications/MAMP/htdocs/parsley/wp-content/themes/FoundationPress-1.0.0/node_modules/node-sass) while reading includes of binding.gyp while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Applications/MAMP/htdocs/parsley/wp-content/themes/FoundationPress-1.0.0/node_modules/node-sass/node_modules/pangyp/lib/configure.js:346:16)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 13.4.0
gyp ERR! command "/usr/local/bin/node" "/Applications/MAMP/htdocs/parsley/wp-content/themes/FoundationPress-1.0.0/node_modules/node-sass/node_modules/pangyp/bin/node-gyp" "rebuild" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Applications/MAMP/htdocs/parsley/wp-content/themes/FoundationPress-1.0.0/node_modules/node-sass
gyp ERR! node -v v4.2.2
gyp ERR! pangyp -v v2.3.3
gyp ERR! not ok 
Build failed
npm ERR! Darwin 13.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.2
npm ERR! npm  v2.14.7
npm ERR! code ELIFECYCLE

npm ERR! node-sass@3.2.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the node-sass@3.2.0 postinstall script 'node scripts/build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Applications/MAMP/htdocs/parsley/wp-content/themes/FoundationPress-1.0.0/npm-debug.log

To clarify above:

step 2, are you suggesting copying the gruntfile.js and package.json from the v1.0.0 source code into my old theme folder ("Version: per FoundationPress, v5.5.1")
step 3: confirming that I should execute "npm install" from the Foundationpress v1.0.0 directory and not the directory of my old theme folder. I actually tried both and received the similar errors.

Another note:

My old theme sits in the same directory as the theme I created using the latest FoundationPress build. Perhaps this is causing a conflict?

olefredrik · 2015-11-18T22:08:48Z

@dberz : That explains a lot. So the download of node-sass is throwing a 404 error. Cannot download "https://github.com/sass/node-sass/releases/download/v3.2.0/darwin-x64-46_binding.node": HTTP error 404 Not Found

Sorry for being unclear. I was suggesting copying the gruntfile.js and package.json from the v.1.7.0 (most recent version of FP) source code into your old theme folder. As long as you have copied the most recent (1.7.0) grunt and package files, you should be able to npm install from any FP install.

That would probably also solve the 404 error on node-sass, as the version specified in the most recent package.json is "node-sass": "~3.4.1"

I would recommend using separate folders for different versions of the theme to avoid any conflicts.

dberz · 2015-11-18T22:43:22Z

@olefredrik : getting closer I think. Thank you again.

In your first note you reference pulling files from FoundationPress v.1.1.0. You clarified this to be from FoundationPress v.1.7.0 and this allowed me to successfully run npm install, though I did receive the following warning.

pm WARN cannot run in wd foundationpress@1.7.0 bower install && grunt build (wd=/Applications/MAMP/htdocs/parsley/wp-content/themes/parsleyhealth)

Then when running npm install, I noticed that .scss changes were not being picked up by grunt "watch".

It seems that I need to reconfigure Gruntfile.js to point to the old directory structure, but I'm not sure exactly what to change.

If I change:

watch: {
            grunt: {files: ['Gruntfile.js']},

            sass: {
                files: 'assets/scss/**/*.scss',
                tasks: ['sass'],
                options: {
                    livereload: true
                }
            },

to:

watch: {
            grunt: {files: ['Gruntfile.js']},

            sass: {
                files: 'css/**/*.scss',
                tasks: ['sass'],
                options: {
                    livereload: true
                }
            },

Grunt will at least notice changes to the sass files, but it doesn't fully output the css stylesheet as needed.

I am wondering if at this point it make sense to rebuild my project off the new FoundationPress build, but that's going to be a lot of extra work for all my historic projects.

dberz · 2015-11-19T16:41:21Z

I'm moving ahead with a new FoundationPress build. It's no longer urgent to troubleshoot this issue, but this might be a good use case to consider for the FoundationPress 6 project!

swthate · 2015-11-19T17:11:04Z

@olefredrik,

I grabbed nvm, thinking it might be best to "manage" multiple installs of node. I verified that it's working, and am currently using node v5.1.0 and npm v3.3.12.

I cloned the latest FoundationPress (1.7.0, right?) to a separate directory and copied it's grunfile.js and package.json files, then pasted those into my current project's theme directory (the one that is using FP 1.0).

Unfortunately, it still errors out at bower install && grunt build.

This time, however, I noticed some errors during the install/build process like xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance.

Here's a gist with the full error: https://gist.github.com/swthate/9c7b163cc75ffef241a2

I only have Xcode CLI installed, as I thought that's all I needed to get my environment to work when I first set it up. I'm downloading the Xcode app right now, hoping that will fix something?

Thanks

olefredrik · 2015-11-19T20:07:42Z

@dberz : That's weird. To be honest, I have no clue what is causing your error, as the error message you got didn't reveal what the actual problem is.

@swthate : Use the mature and dependable version of node (v.4.2.2) and you should be good to go. Node v.5.1.0 with all the latest features is not supported.

swthate · 2015-11-20T17:00:32Z

Thanks, @olefredrik

Something interesting happened. After I installed and switched to node 4.2.2, I hopped in my theme directory and ran grunt just to check, and it actually ran grunt after my last botched npm install attempt. It provided this error message:

Stevens-iMac:dst-fp Steven$ grunt
Loading "sass.js" tasks...ERROR
>> Error: The `libsass` binding was not found in /Users/Steven/Sites/dst/wp-content/themes/dst-fp/node_modules/node-sass/vendor/darwin-x64-46/binding.node
>> This usually happens because your node version has changed.
>> Run `npm rebuild node-sass` to build the binding for your current node version.

I was surprised that the last npm install had actually gone through, albeit with some difficulties. I followed the error message and ran npm rebuild node-sass and now grunt's running without a hitch. I've never seen that error before, but it seems to be working now!

Thanks!

olefredrik · 2015-11-20T20:28:53Z

👍

dberz · 2015-11-22T14:54:31Z

@olefredrik @Aetles - sorry to bother you guys again with my struggles, but I'm having a blocker production issue that might be related to the problems above.

I've gone ahead and rebuild my project using the latest FoundationPress build.

You can see this project (and the console error mentioned below) here: https://parsleyhealth.com

In the console, I'm seeing the following error:

Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function) 
@ autoptimize_26c407466fedf9fa58ba3bbae0a1898c.js:78o.event.dispatch 
@ jquery.min.js:3r.handle 
@ jquery.min.js:3
(index):1

I believe all my site's Javascript is broken. For example, I cannot submit the webform here:
https://parsleyhealth.com/about/

Any insight to the error? I think it might be related to the installation of the themes base javascript files. I've run npm run build and npm install a number of times already.

Thank you!

olefredrik · 2015-11-22T15:18:02Z

@dberz : The issue seems to be related to the jQuery blockUI plugin. This is a thrid-party plugin that is not a part of the FoundationPress bundle. Have you tried disabling this plugin?

dberz · 2015-11-22T15:42:48Z

@olefredrik :
It seems that jQuery blockUI is referenced heavily by WooCommerce which drives the business of our website (as well as The Events Calendar, Advanced Custom Fields, etc). I'm hesitant to turn that off as it might break our store (core business). I've been running Woocommerce for many months now without issue until moving over to this new FP build.

One possible clue - the FP theme's javascript files were not automatically 'build' into this version of FoundationPress. I had to pull them in manually as I thought this might be related to the terminal errors of this original thread.

Is there a better place to pull / place the scripts needed for FoundationPress?

Thank you!

olefredrik · 2015-11-22T15:53:45Z

I wasn't suggesting disabling the blockUI plugin permanently. Just for debugging, to see if that's will clear your console errors.

I wouldn't recommend pushing any updates to a to a live production site unless it builds perfectly on a dev / staging environment. Are you still unable to run npm run build? From your previous comment is seems like you have modified the directory structure? I would not recommend that either, unless you know 100% what you're doing. For example, you will need to change the paths for the sass task as well as the watch task.

dberz · 2015-11-22T16:04:52Z

I know that I should not have deployed. I was struggling across the board and was hoping this error was not a blocker. I learned that lesson the hard way :(

Yes npm run build works for me now. I just pulled down the latest production gruntfile.js and cleared my javascript directory (except for the /custom contents that match what's in your bit build). ``npm run build` successfully executes and rebuilds the JS directory as expected. Unfortunately, the console error persists.

olefredrik · 2015-11-22T16:09:47Z

Try disabling the autoptimize plugin and see if that helps?

dberz · 2015-11-22T16:21:27Z

Disabled. But that did not seem to correct the issue.

dberz · 2015-11-22T16:35:21Z

If helpful, this does seem to be a theme-specific issue. When I use the wordpress theme preview feature to view my older theme - the error does not occur.

Are there any references within the new FoundationPress to the .top object that I might be able to investigate? Perhaps functions around the top-bar?

I'm also seeing a 1px gap just about my 'sticky' top bar nav on my production site. In my old theme, the top bar use to be flush with the top of the browser.

dberz · 2015-11-22T16:56:56Z

OK, I figured out the error. It was related to my footer, which was not structured the same way as the new build. I recreated it within the latest FoundationPress build and all seems well.

Many thanks again for the help!

olefredrik · 2015-11-22T22:17:41Z

👍

olefredrik closed this as completed Nov 20, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Major struggles with npm / grunt / node-sass when working with old and new FP projects simultaneously #553

Major struggles with npm / grunt / node-sass when working with old and new FP projects simultaneously #553

dberz commented Nov 17, 2015

Aetles commented Nov 17, 2015

swthate commented Nov 17, 2015

dberz commented Nov 18, 2015

olefredrik commented Nov 18, 2015

dberz commented Nov 18, 2015

olefredrik commented Nov 18, 2015

dberz commented Nov 18, 2015

dberz commented Nov 19, 2015

swthate commented Nov 19, 2015

olefredrik commented Nov 19, 2015

swthate commented Nov 20, 2015

olefredrik commented Nov 20, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015

dberz commented Nov 22, 2015

dberz commented Nov 22, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015

Major struggles with npm / grunt / node-sass when working with old and new FP projects simultaneously #553

Major struggles with npm / grunt / node-sass when working with old and new FP projects simultaneously #553

Comments

dberz commented Nov 17, 2015

Aetles commented Nov 17, 2015

swthate commented Nov 17, 2015

dberz commented Nov 18, 2015

olefredrik commented Nov 18, 2015

dberz commented Nov 18, 2015

olefredrik commented Nov 18, 2015

dberz commented Nov 18, 2015

dberz commented Nov 19, 2015

swthate commented Nov 19, 2015

olefredrik commented Nov 19, 2015

swthate commented Nov 20, 2015

olefredrik commented Nov 20, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015

dberz commented Nov 22, 2015

dberz commented Nov 22, 2015

dberz commented Nov 22, 2015

olefredrik commented Nov 22, 2015