Crash when vue() invoked.

• Laravel Mix Version: 6.0.25
• Node Version (node -v):v14.17.3
• NPM Version (npm -v): 7.20.0
• OS: Ubuntu 20.04

Description:

As soon as .vue() is in my webpack.mix.js file it crashes.

Steps To Reproduce:

mkdir my-app && cd my-app
npm init -y
npm install laravel-mix vue --save-dev
touch src.js
echo "let mix = require('laravel-mix');mix.js('src.js', 'dist.js').vue();" >webpack.mix.js
npx mix

Gives

[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
- /home/rich/ffs/node_modules/vue-loader/lib/plugin-webpack5.js
- /home/rich/ffs/node_modules/vue-loader/lib/plugin.js
- /home/rich/ffs/node_modules/vue-loader/lib/index.js
- /home/rich/ffs/my-app/node_modules/laravel-mix/src/components/Vue.js
- /home/rich/ffs/my-app/node_modules/laravel-mix/src/components/ComponentRegistrar.js
- /home/rich/ffs/my-app/node_modules/laravel-mix/src/Mix.js
- /home/rich/ffs/my-app/node_modules/laravel-mix/setup/webpack.config.js
- /home/rich/ffs/my-app/node_modules/webpack-cli/lib/webpack-cli.js
- /home/rich/ffs/my-app/node_modules/webpack-cli/lib/bootstrap.js
- /home/rich/ffs/my-app/node_modules/webpack-cli/bin/cli.js
- /home/rich/ffs/my-app/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/home/rich/ffs/my-app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/rich/ffs/node_modules/vue-loader/lib/plugin-webpack5.js:6:42)
    at Module._compile (/home/rich/ffs/my-app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/rich/ffs/node_modules/vue-loader/lib/plugin-webpack5.js',
    '/home/rich/ffs/node_modules/vue-loader/lib/plugin.js',
    '/home/rich/ffs/node_modules/vue-loader/lib/index.js',
    '/home/rich/ffs/my-app/node_modules/laravel-mix/src/components/Vue.js',
    '/home/rich/ffs/my-app/node_modules/laravel-mix/src/components/ComponentRegistrar.js',
    '/home/rich/ffs/my-app/node_modules/laravel-mix/src/Mix.js',
    '/home/rich/ffs/my-app/node_modules/laravel-mix/setup/webpack.config.js',
    '/home/rich/ffs/my-app/node_modules/webpack-cli/lib/webpack-cli.js',
    '/home/rich/ffs/my-app/node_modules/webpack-cli/lib/bootstrap.js',
    '/home/rich/ffs/my-app/node_modules/webpack-cli/bin/cli.js',
    '/home/rich/ffs/my-app/node_modules/webpack/bin/webpack.js'
  ]
}

I tried npm -i vue-loader --save-dev but npx mix then complains:

[webpack-cli] Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (/home/rich/ffs/my-app/node_modules/vue-loader/dist/index.js:8:11)
    at Module._compile (/home/rich/ffs/my-app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/home/rich/ffs/my-app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Vue.webpackPlugins (/home/rich/ffs/my-app/node_modules/laravel-mix/src/components/Vue.js:116:35)
    at ComponentRegistrar.applyPlugins (/home/rich/ffs/my-app/node_modules/laravel-mix/src/components/ComponentRegistrar.js:203:23)
    at /home/rich/ffs/my-app/node_modules/laravel-mix/src/components/ComponentRegistrar.js:102:50

[williamcolbert]

A temporary fix is to add "webpack": "5.44.0" to devDependencies in your package.json

Looks like webpack made a breaking change in 5.45.0, by renaming the file.

[thecrypticace]

Yep, this is a vue-loader problem due to a change with the latest webpack release: https://github.com/vuejs/vue-loader/issues/1854

Pin your version of webpack until the problem is resolved I’m not sure if the problem should be resolved by webpack or vue-loader in this case. Either way I’ll try to keep an eye on it.