Laravelでnpm run devをするとエラーになります

Question

Docker環境でLaravel8系をインストールしており、Vueと連携させたいと思っています。

（コンテナに入る）
$ docker-compose exec app bash

（laravel/uiパッケージのインストール）
$ composer require laravel/ui

（Vueのインストール）
$ php artisan ui vue --auth

（npmコマンド実行）
$ npm install && npm run dev

と、定番の手順通りに進めたのですが、

「npm install」コマンドに関しては

$ 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/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.1.2 (node_modules/watchpack/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1084 packages from 501 contributors and audited 1087 packages in 664.786s

50 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 run dev」コマンドに関しては、

$ npm run dev
SyntaxError: Invalid or unexpected token
    at new Script (vm.js:100:7)
    at NativeCompileCache._moduleCompile (/work/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
    at Module._compile (/work/node_modules/v8-compile-cache/v8-compile-cache.js:184:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (/work/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/work/node_modules/laravel-mix/src/File.js:5:14)
    at Module._compile (/work/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (/work/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/work/node_modules/laravel-mix/src/index.js:20:15)
    at Module._compile (/work/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (/work/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/work/node_modules/laravel-mix/setup/webpack.config.js:6:11)
    at Module._compile (/work/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (/work/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/work/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
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-11-22T11_48_25_404Z-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!     /root/.npm/_logs/2020-11-22T11_48_25_488Z-debug.log

このようなエラーが出ました。

前者に関しては、「npm audit」で確認したところ

$ npm audit
                                                                                
                       === npm audit security report ===                        
                                                                                
# Run  npm install --save-dev resolve-url-loader@3.1.2  to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
                                                                                
  High            Prototype Pollution                                           
                                                                                
  Package         object-path                                                   
                                                                                
  Dependency of   resolve-url-loader [dev]                                      
                                                                                
  Path            resolve-url-loader > adjust-sourcemap-loader > object-path    
                                                                                
  More info       https://npmjs.com/advisories/1573                             
                                                                                


found 1 high severity vulnerability in 1087 scanned packages
  1 vulnerability requires semver-major dependency updates.

とあったので、指示通りに

$ npm install --save-dev resolve-url-loader@3.1.2

$ npm audit
                                                                                
                       === npm audit security report ===                        
                                                                                
found 0 vulnerabilities
 in 1087 scanned packages

と解決できました。

しかしその後再度「npm run dev」を実行したところ、先ほどと同じエラーが出ます。

バージョンがダメなのかなと思い確認しましたが、

$ npm -v
6.14.8

$ node -v
v14.15.1

と、どちらも最新の安定バージョンとなっていると思います。
（こちらで確認https://nodejs.org/ja/download/）

一応以下のように一旦お掃除して再度インストールするということもやってみましたが、

$ rm -rf node_modules
$ rm package-lock.json
$ npm install
$ npm run dev

またループするだけでした。
先ほどと全く同じエラーが出ます。

どなたか解決法が分かる方がいましたら教えてください。。

Answer 1

「npm install」コマンドに関しては

警告だけでエラーは出てないと思います。

最後の二行

found 1 high severity vulnerability
run npm audit fix to fix them, or npm audit for details

は、「重大な脆弱性を含むなパッケージがあるぜ！てやんでい！！」という意味です。
直接的には今回のエラーには関係してないと思いますが、後程、文中に記載のnpm audit fixを実行したほうがよいと思います。

「npm run dev」コマンドに関しては、

npm cache clear --forceの実行くらいしか思いつかないです。
仮想環境だとnpm系のコマンドがうまくいかないと以前みたことがあるので（Homesteadの話）、Dockerから抜けて当該コマンドを実行してみてください。

Comments

[izaya]

ありがとうございます。
なんか、nodeのバージョンを下げたらうまくいきました。
おっしゃる通り、警告とエラーは違うんでしたね。。

Answer 2

nodeのバージョンを10にしたらうまくいきました。