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

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

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

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

「/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」

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に変更すればうまくいきそうです。

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



Author: webmaster