Laravel Mix "sh: 1: cross-env: not found error"

Question

I have been trying to set up Laravel Mix in my project and followed the install guide on the Laravel website however keep getting errors.

My package.json

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.4.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  },
  "name": "Code",
  "version": "1.0.0",
  "main": "webpack.mix.js",
  "directories": {
    "test": "tests"
  },
  "dependencies": {
    "ansi-regex": "^2.1.1",
    "ansi-styles": "^2.2.1",
    "axios": "^0.15.3",
    "babel-core": "^6.24.1",
    "babel-code-frame": "^6.22.0",
    "babel-generator": "^6.24.1",
    "babel-messages": "^6.23.0",
    "babel-helpers": "^6.24.1",
    "babel-register": "^6.24.1",
    "babel-template": "^6.24.1",
    "babylon": "^6.17.0",
    "balanced-match": "^0.4.2",
    "babel-runtime": "^6.23.0",
    "babel-types": "^6.24.1",
    "babel-traverse": "^6.24.1",
    "brace-expansion": "^1.1.7",
    "bootstrap-sass": "^3.3.7",
    "chalk": "^1.1.3",
    "convert-source-map": "^1.5.0",
    "concat-map": "^0.0.1",
    "core-js": "^2.4.1",
    "cross-env": "^3.2.4",
    "detect-indent": "^4.0.0",
    "esutils": "^2.0.2",
    "escape-string-regexp": "^1.0.5",
    "follow-redirects": "^1.0.0",
    "globals": "^9.17.0",
    "has-ansi": "^2.0.0",
    "home-or-tmp": "^2.0.0",
    "is-finite": "^1.0.2",
    "invariant": "^2.2.2",
    "json5": "^0.5.1",
    "js-tokens": "^3.0.1",
    "jquery": "^3.2.1",
    "jsesc": "^1.3.0",
    "laravel-mix": "^0.4.0",
    "lodash": "^4.17.4",
    "loose-envify": "^1.3.1",
    "mkdirp": "^0.5.1",
    "minimatch": "^3.0.3",
    "minimist": "^0.0.8",
    "number-is-nan": "^1.0.1",
    "os-homedir": "^1.0.2",
    "os-tmpdir": "^1.0.2",
    "path-is-absolute": "^1.0.1",
    "private": "^0.1.7",
    "regenerator-runtime": "^0.10.3",
    "repeating": "^2.0.1",
    "slash": "^1.0.0",
    "source-map": "^0.5.6",
    "source-map-support": "^0.4.14",
    "strip-ansi": "^3.0.1",
    "trim-right": "^1.0.1",
    "to-fast-properties": "^1.0.2",
    "vue": "^2.3.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

The error I am getting when I run any npm run command.

> [email protected] dev /home/vagrant/Code
> cross-env NODE_ENV=development webpack --progress --hide-modules

sh: 1: cross-env: not found

npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.8.0
npm ERR! npm  v4.2.0
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] dev: `cross-env NODE_ENV=development webpack --progress --hide-modules`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] dev script 'cross-env NODE_ENV=development webpack --progress --hide-modules'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the Code package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development webpack --progress --hide-modules
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs Code
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls Code
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/vagrant/.npm/_logs/2017-04-28T17_24_11_458Z-debug.log

I am running my project on a Vagrant box, and I am running Laravel version 5.4.

Answer 1

You need to make cross-env working globally instead of having it in the project.

run

$ sudo npm install --global cross-env

--- update ---

But, my advice is to avoid executing npm run ... on the guest homestead, because it is very slow and because there is no benefit in it.

No matter where you build the assets they are going to be executed in the browser. So you better install npm on your host computer and build the assets there.

Answer 2

First check if cross-env module is installed. If not, run:

npm install cross-env

After that you need to go to the node_modules folder. Then find cross-env folder. Go inside and find cross-env.js.

In my case it was node_modules/cross-env/dist/bin/cross-env.js

You need to change path to cross-env.js in scripts section in your package.json file.

{
  "private": true,
  "scripts": {
    "dev": "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_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",
    "hot": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "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"
  },

........

}