Laravel/ui で Vue をインストールした際のエラー対処備忘録

エラー

composer require laravel/uiでパッケージを追加して、php artisan ui vueでベースを作成。
その後、npm install npm run devを実行した際に、以下のようなエラーが発生しました。

[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
- D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\plugin-webpack5.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\plugin.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\index.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\src\components\Vue.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\src\components\ComponentRegistrar.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\src\Mix.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\laravel-mix\setup\webpack.config.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack-cli\lib\webpack-cli.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack-cli\lib\bootstrap.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack-cli\bin\cli.js
- D:\110_LaravelProject\CasualMeetingV2\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (D:\110_LaravelProject\CasualMeetingV2\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\110_LaravelProject\CasualMeetingV2\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
    at Module._compile (D:\110_LaravelProject\CasualMeetingV2\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\vue-loader\\lib\\plugin.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\vue-loader\\lib\\index.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\src\\components\\Vue.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\src\\Mix.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\laravel-mix\\setup\\webpack.config.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack-cli\\lib\\bootstrap.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack-cli\\bin\\cli.js',
    'D:\\110_LaravelProject\\CasualMeetingV2\\node_modules\\webpack\\bin\\webpack.js'
  ]
}

これは、vue-loaderが古いせいで発生しているようです。

対処法

以下コマンドを実行して、再度npm run devを実行

npm i vue-loader