Laravelのプロジェクトを作成
↓
Laravel/uiをインストール
↓
php artisan ui vue --auth実行
↓
npm install実行 ←エラー
そのエラーがこちら
Ubuntu
$ npm install
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/@types/browser-sync/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 1203 packages from 529 contributors and audited 1207 packages in 202.73s
98 packages are looking for funding
run `npm fund` for details
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
たくさんエラーが出ていますね...。なるべくコマンドで解消したいので自動修復を試してみましょう
使用コマンド → npm audit fix --force
詳しくは→ https://docs.npmjs.com/cli/v7/commands/npm-audit
Ubunut
$ npm audit fix --force
npm WARN using --force I sure hope you know what you are doing.
> fsevents@1.2.13 install /mnt/c/Git/Web4QTest_Laravel/node_modules/fsevents
> node install.js
Skipping 'fsevents' build as platform linux is not supported
+ resolve-url-loader@3.1.2
added 21 packages from 51 contributors, removed 16 packages and updated 3 packages in 29.009s
98 packages are looking for funding
run `npm fund` for details
fixed 1 of 1 vulnerability in 1207 scanned packages
1 package update for 1 vulnerability involved breaking changes
(installed due to `--force` option)
package.jsonに記載の"resolve-url-loader": "^2.3.1"が"resolve-url-loader": "^3.1.2",にダウングレードされていました。
もう一度npm installを試してみましょう
Ubuntu
$ npm install
audited 1210 packages in 16.768s
98 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
エラーが消えましたね。今回の問題はバージョンが高すぎて対応してなかっただけみたいですｗ
おまけ
使用コマンド → npm run dev
Ubuntu
sugitaku03031@Desktop-B450:/mnt/c/Git/Web4QTest_Laravel$ npm run dev
> @ dev /mnt/c/Git/Web4QTest_Laravel
> npm run development
> @ development /mnt/c/Git/Web4QTest_Laravel
> mix
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-loader@^15.9.5 --save-dev --legacy-peer-deps
Finished. Please run Mix again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
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! /home/sugitaku03031/.npm/_logs/2021-03-09T19_07_08_456Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
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! /home/sugitaku03031/.npm/_logs/2021-03-09T19_07_08_485Z-debug.log
Finished. Please run Mix again. → 終了しました。 もう一度Mixを実行してください。
この時点でpackage.jsonに"vue-loader": "^15.9.6",が追加されました。
もう一度npm run devを実行
Ubuntu
sugitaku03031@Desktop-B450:/mnt/c/Git/Web4QTest_Laravel$ npm run dev
> @ dev /mnt/c/Git/Web4QTest_Laravel
> npm run development
> @ development /mnt/c/Git/Web4QTest_Laravel
> mix
● Mix █████████████████████████ emitting (98%)
after emit
● Mix █████████████████████████ done (99%) plugins
WebpackBar:done
✔ Mix
Compiled successfully in 40.07s
Laravel Mix v6.0.13
✔ Compiled Successfully in 39792ms
File │ Size
/js/app.js │ 1.4 MiB
css/app.css │ 178 KiB
webpack compiled successfully
無事にapp.cssとapp.js`ができ、終了です。お疲れ様でした！