laravel-mix: Cannot find module cross-env

cross-env must have updated its paths, it has “cross-env/dist/bin” not “cross-env/bin/”

in package.json (EDIT)

    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

@phuclh

package.json paste this

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.1",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

• npm install --save-dev cross-env
• npm install

Now npm run dev npm run watch

Actually, I fixed with this sequence. After that, I’m able to run npm run dev inside vagranth ssh connection

sudo rm node_modules/ -rf

# this avoid problem with `cross-env not found`

sudo npm install cross-env -g

# Execute two times to resolve the problem with ` Maximum call stack size exceeded` 
# while finalizing 
# Also note: I'm using --no-bin-links because I've a Windows 7 host

npm install --no-bin-links || npm install --no-bin-links

# this avoid problem with `Module build failed: ModuleBuildError: Module build failed:
# Error: ENOENT: no such file or directory, scandir 
#'/home/vagrant/Code/<your project name>/node_modules/node-sass/vendor' `

npm rebuild node-sass --no-bin-links

I do not alter package.json file

OPTIONAL: If you want to really clear your vagrant box do this BEFORE starting

sudo npm ls -gp --depth=0 | awk -F/ '/node_modules/ && !/\/npm$/ {print $NF}' | xargs sudo npm -g rm

Then go on removing local node_modules folder from your code folder

If you’re using homestead, you get this error if you run the command in the VM.

https://github.com/JeffreyWay/laravel-mix/issues/447

Try the scripts in the link rather than the ones you are currently using in your config

In package.json, npm run dev is directly trying to run ‘cross-env + command’

If you install cross-env globally, it will fix the problem.

sudo npm i -g cross-env

It is that simple.

For the latest "laravel-mix": "^5.0.0", I had to change from dist to src cause there is no dist in cross-env. So my scripts are:

"scripts": {
    "dev": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

You’ll need to change the references to this path for all scripts, including:

• dev
• watch
• hot
• production

Replacing “cross-env/bin/” with “cross-env/dist/bin” in package.json solved my issue…

Now its working fine. Thanks @dwoodard

@JeffreyWay can you please update package.json with laravel default installation?

For me this means an application that previously build successfully suddenly failed. I hope this will be fixed, manually adding the package isn’t a great solution.

We removed the dependency with the 1.0 release. It was the right time to remove that dependency. It takes five seconds to do npm i cross-env.

here is a complete solution: http://rapidsol.blogspot.com/2018/04/laravel-5-cross-env-is-not-recognized.html

Thank you. Had split some hairs because of this.

@realtebo It’s not required. I don’t think people understand that the only use for cross-env is to allow for cross-platform npm scripts. If you’re a Mac user, you don’t need it. If you’re a Windows users, either pull it in, or tweak the npm script to fit your platform. Mix, itself, does not depend upon cross-env.

We had the same issue here but changing the package.json file is not a good option when you work in a big team with different dev environments. My solution here is a simple npm install -g cross-env. That should do the trick.

Thanks for the detailed information @mostafa6765!

Thanks @dwoodard 😄

Can you check your installed version of Mix again? 0.8.7 doesn’t exist.

"dev": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

Thanks, I solved my problem by following your advice. This works. Just for sharing, after that I am still facing another error: “Cannot read property ‘js’ of undefined” then I have to do the following steps then after that only it is fixed:

Simply remove the braces surrounding the mix on your first line: const mix = require(‘laravel-mix’);

Reference: https://stackoverflow.com/questions/56891915/laravel-typeerror-cannot-read-property-js-of-undefined

I just install yarn command globally: https://yarnpkg.com/en/docs/install

This help me a lot to clear my panoram…

I use windows without cross-env. I simply adjusted my script in package.json as below:

"development": "set NODE_ENV=development&& webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "set NODE_ENV=development&& webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
//

@JeffreyWay it takes a short time to install, but much more time to investigate why a script that comes with the framework ends in error.

The way to describe that a Node application needs additional code to run is by including it in package.json, why not use that mechanism?

(Added to my list of Laravel tips & pitfalls)

@JeffreyWay I have no problem following installation instructions, if all that is documented there. Things change, I accept and welcome that, but I’m no psychic I can’t guess what changed.

@ruchern Okay so you recommend compiling the website in the VM (on linux) right? I would be totally confused if that was not the intention after all. And you recommend staying on nodejs 6.11.x but updating only npm and to the latest version 4.x?

For those who are forced to bounce-around between environments (e.g., developing on Windows with Vagrant and a mounted filesystem but deploying to GNU/Linux), this issue can arise if you npm install --no-bin-links, which is sometimes necessary to resolve symbolic linking issues on Windows when using a mounted filesystem within a development VM.

Using the --no-bin-links switch effectively causes the cross-env binary location to change from just just cross-env (node_modules/.bin/cross-env, technically) to node_modules/cross-env/dist/bin/cross-env.js, in which case it is necessary to specify the full path, explicitly, in package.json, as described in a previous comment.

Mix has a full test suite. Just fork, clone, and run the tests on the OS of your choosing.

Is Laravel-Mix actually known to work consistently and flawlessly on any other platform than Mac OSX? I wonder, do you guys even test it as thoroughly under Linux like Ubuntu and Homestead?

In addition to @JeffreyWay, Linux also does not need cross-env.

@JeffreyWay

It was the right time to remove that dependency

Why? If it IS NEEDED it IS a dependency…

I’m sure I’ve lost something …

I’ve done some research in the last few days and it does seem that thoughts on this have changed in recent years. When I first started with homestead years ago, there were so many issues with npm on vagrant that everyone recommended running it on the host. I’ve stuck with that and never had any problems. I even use yarn on the host machine(windows). However it seems I’m behind on the current trend and although it may be a little slower, npm and yarn should work just fine on the vm.

@patlecat Yes, you should be and I assume you did, run the scripts in the Homestead environment.

As for the npm version, the latest now is v5.3.0, but it is plagued with a lot of problems. v4 is very stable so to speak. I am not sure if v4 is outdated that it won’t work anymore.

@ruchern thanks for the info.

Because cross-env is now removed from Laravel-Mix by default. If you are a Windows user, then you will have to install cross-env manually.

For me this means an application that previously build successfully suddenly failed. I hope this will be fixed, manually adding the package isn’t a great solution.

It’s July 2017, I did a fresh installation of Homestead (on Windows 10) and Laravel 5.4 and still got this cross-env error during npm install !! But now the mix file looks different with the paths so the above tips won’t work anymore. Even after installing the cross-env pckg manually to -g I get errors with every “npm install…” or “npm run dev” command i execute inside of Homestead!

Also “npm run dev” produces the “cross-env not found” error (plus many more following that)!

Why is this still a problem after such a long time at this very basic and important functionality?

Tell the author that this fails on your system: npm ERR! cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js