カテゴリー
コンピューター

Laravel 6 、 Vue.js 3 の SPA で `npm run production` が失敗する問題を修正する

Laravel 6 、 Vue.js 3 の SPA で `npm run production` が失敗したところ

はじめる前に

環境構築と指定は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きとなります。純粋な時系列としては Laravel 6 の Vue.js 3 で、デイトピッカー flatpickr のラッパーシングルファイルコンポーネント (SFC) を作った – oki2a24 の続きとなります。

エラーの内容

$ npm run production

> @ production /var/www/html/laravel
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js

[webpack-cli] Error: Unknown option '--no-progress'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ production 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!     /home/app/.npm/_logs/2021-06-12T03_11_27_136Z-debug.log
$
Bash

エラーの修正

Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 で環境構築をした際、 package.json 記載の依存パッケージの内容が変わりました。この変更に、 npm run production の内容がついて行けていないのでは? との仮説を立てました。

そこで、 laravel/package.json at 8.x · laravel/laravel をみてみたところ、内容が異なっていますので、これに合わせてみました。

結果は、これで治りました♪

❯ git diff laravel/package.json
diff --git a/laravel/package.json b/laravel/package.json
index 5084b97..de6894e 100644
--- a/laravel/package.json
+++ b/laravel/package.json
@@ -2,12 +2,12 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "production": "mix --production",
         "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore resources/",
         "format": "prettier --write --ignore-path .gitignore resources/**/*.{js,vue}"
     },
$
Diff

さて、今回の変更で、どうも cross-env は不要になったように思いました。ですので

npm uninstall cross-env --save-dev
Bash

で削除しました。その後、 npm run コマンドを実行してみましたけれども、問題はなさそうでした。

おわりに

普段は npm run watch ばかり使っているため、発見が遅れました。修正できてよかったです。

以上です。

コメントを残す