Warnings/Errors on npm install and npm run dev

[ccziriak]

Will try this again – tried to edit previous entry and lost the whole topic.

I ran into problems trying to set up dev environment. How do I correct the following?:

djembefola:~ caryn$ cd '/Users/caryn/Documents/Admin/gutenbergtest4/wp-content/plugins/jsforwp-blocks'
djembefola:jsforwp-blocks caryn$ npm install
npm WARN jsforwp-blocks@1.0.0 No description
npm WARN jsforwp-blocks@1.0.0 No repository field.

up to date in 0.913s
djembefola:jsforwp-blocks caryn$ npm run dev

> jsforwp-blocks@1.0.0 dev /Users/caryn/Documents/Admin/gutenbergtest4/wp-content/plugins/jsforwp-blocks
> cross-env BABEL_ENV=default webpack --watch

sh: cross-env: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code>
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the jsforwp-blocks@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/caryn/.npm/_logs/2018-02-23T21_40_18_986Z-debug.log
djembefola:jsforwp-blocks caryn$ 

[Sally]

I got some of the same errors. I don’t do a lot of CLI, so would like to hear some input from someone who knows.

[ccziriak]

Still hoping Zac will stop by and provide some assistance here. I haven’t gone any further with the course since using the modern dev tools is a big part of the reason I signed up for it to begin with.

[Zac Gordon]

Hi @ccziriak!

Sorry I missed that you posted up your specific errors here!

Okay so this is basically saying that the cross-env library is not being loaded.

To start troubleshooting this let’s

1. Make sure that the cross-env package is listed in your package.json file. It should be by default.
2. Manually delete the node_modules folder in the jsforwp-blocks folder and try running npm install again.
3. This should make sure that cross-env is loaded.

Let me know the results and we’ll go from there..

[ccziriak]

Hi Zac,

Thanks for the guidance.

1. Yes the cross-env package is listed in the package.json file

2. The command failed before actually creating the node_modules folder in jsforwp-blocks. After doing some further investigation I found that the dev dependencies were not getting loaded – my NODE_ENV environment variable was set to production. I’m not sure what the default is for this or what set it that way, but it seems to be set to production globally on my Mac.

3. I can get npm run dev to execute now if I set NODE_ENV to be something other than production, either by setting it first:

export NODE_ENV=development

or including it with the npm command like so:

NODE_ENV=development npm run dev

So I got the commands to execute and I see Webpack is watching the files, but I’m still trying to figure out what else I have installed that’s setting NODE_ENV=production.

[Zac Gordon]

Okay, great! This is a step in the right direction.

1. Good
2. Okay, so if you delete the node_modules folder and just run npm init in the plugin folder, what specific errors do you get?
3. NODE_ENV is being set automatically for you when you run npm run dev or npm run build. You should not need to set NODE_ENV manually. See these commands here? How they set that for you – https://github.com/zgordon/gutenberg-course/blob/master/jsforwp-blocks/package.json#L4-L5

Two followup questions:

4. Where are you hard coding the value of NODE_ENV?
5. When you run “npm run dev” and change something in the JS, does the file rebundle and show up properly in WordPress?

[ccziriak]

Hey Zac,

2. I deleted the node_modules folder and ran npm init. It recreated the package.json file exactly the same as it was in the original downloaded course files, with no errors.

3. I was able to get this corrected – see #4.

4. I wasn’t sure where in my system NODE_ENV was getting set to production – spent a lot of time googling/trying to figure that out. Thought maybe it was from Atom since that created some other environment variables related to node, but I completely uninstalled Atom and was still seeing the same thing. Looks like I just needed to reboot my system to reinitialize. Once I did that, NODE_ENV is no longer set (echo $NODE_ENV returns nothing) and it looks like everything is working.

5. I am able to make changes in the JS now and see them picked up and recompiled.

Thanks for your help in troubleshooting!

[Zac Gordon]

Oh Yay!

– FIRST So proud of you!!! This is no small thing getting tools like this up and running and you deserve some recognition here for working through all this 🙂 Congrats 🙂

– That is WEIRD about the NODE_ENV thing. Hopefully you should not need to uninstall Atom or do major reboots to have everything work going forward.

Please post back up in this thread if you have the same issues or a new one if anything different comes up for you 🙂

[Author]

Posts