Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

laravelでnpm run devを実行すると「cross-env: not found」というエラーが出る件対応したった

More than 3 years have passed since last update.

package.jsonの記述が問題だったよう。

{
  "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.4",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.3",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

dev、watch、hot、productionのcross-envとなっているところを、
ちゃんとnode_modulesの中のcross-env.jsまでパスに変えてあげる。
これを以下のような形に書き換える

{
  "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": "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": "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.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.4",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.3",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

Laracastsの以下のページを参考にしました。
https://laracasts.com/discuss/channels/laravel/cross-env-not-found-on-npm-run-dev?page=1

追記

原因はcross-envのファイルを見つけられないことだと思うので、cross-envまでのパスを通してあげればOKだけど、cross-envだけでなく、他のファイルでも同様。
別の機会に同じエラーが出たけど今度はパスを変えてもダメだった。
エラー文をよく見ると、

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

の部分でエラーが発生しており、
上記に記載されたファイルをそれぞれvimで開いてみると、cross-env以外のファイルがひらけなかった。
実際にフォルダを見てみようとしたがフォルダ自体存在していなかったので、

npm install webpack

などで必要なパッケージをインストールすることで、該当フォルダが作成されて無事npm run watchが成功した。
ちなみに、npm run watchが成功しても、その後ファイルを更新したのに自動コンパイルされない、という事態が発生することがある。
その場合は、npm run watch-pollとすれば自動コンパイルがちゃんと動作する。
(もちろんwebpack.mix.jsにコンパイルするファイルを定義しておく必要はある)

以上。

Yorinton
NetFlix、Hulu、U-next、T-verを経てAmazonプライムに流れ着く。3度の飯より好きなものは特に無いけど、3度の飯時には必ずと言っていいほどアニメを嗜む。PHP、JS、TS、Vue.js、Laravel、少しだけGo. 開発責任者.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away