Posted in Laravel, vuejs

[Vue.js] npm ERR! @ development: `cross-env エラー

   Published Date: 2020年4月28日

LaravelとVue.jsの連携を行っている時に「npm run watch」（自動コンパイル）を行ってみると下記のようなエラーが出ました。

# npm run watch
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-04-28T04_49_56_388Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `npm run development -- --watch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-04-28T04_49_56_401Z-debug.log

「cross-env」というところでエラーが出ているようです。直後には下記のようなファイルパスが表示されているのでこのあたりの確認をしていってみます。node_modulesのwebpackのパスが気になるところです。
「NODE_ENV=development node_modules/webpack/bin/webpack.js」
「node_modules/laravel-mix/setup/webpack.config.js」

もうひとつ別のコマンドを打ってみます。

# npm run dev
> @ dev /var/www/html/example.com/プロジェクト名
> 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

internal/modules/cjs/loader.js:983
  throw err;
  ^

Error: Cannot find module '/var/www/html/example.com/プロジェクト名/node_modules/cross-env/dist/bin/cross-env.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ 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`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-04-28T05_24_13_648Z-debug.log

「/var/www/html/example.com/プロジェクト名/node_modules/cross-env/dist/bin/cross-env.js’」で「MODULE_NOT_FOUND」が出ているので、このパスにファイルがあるかを確認してみます。

こちらも「/var/www/html/example.com/プロジェクト名/node_modules/cross-env/dist/bin/cross-env.js」というパスがでてきて、「cross-env.js」というファイルが関係しているようです。

Laravelのプロジェクトのルートにある、「packege.json」でファイルパスを確認してみます。

「package.json」

{
  "private": true,
  "scripts": {
    "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"
  },
  "devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0.2",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
  },
  "dependencies": {
    "vue-router": "^3.1.6"
  }
}

packege.jsonでは「node_modules/cross-env/dist/bin/cross-env.js」というパスになっています。Laravelのルートにあるnode_modulesディレクトリの中を探してみると、cross-env.jsは「node_modules/cross-env/src/bin/cross-env.js」となっています。

package.jsonでは「dist」、実際は「src」というディレクトリ名の違いが判明しました。
これはpackage.jsonのdistをsrcに変更すればうまくいきそうです。

  "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"
  },

こちらを書き換えて保存してから「npm run watch」を実行するとエラーが消えてうまく動きました。nodeのバージョンによってdistとsrcのディレクトリが違うのでこのようなエラーになってしまうようです。



Author: webmaster