vuetify-loader 1.6 is incompatible with laravel mix

After updating vuetify-loader from 1.5 to 1.6 I get the error message below. Downgrading from 1.6 to 1.5 solves the error message.

\node_modules\webpack-cli\bin\cli.js:281 throw err; ^ Error: [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf. at VueLoaderPlugin.apply (node_modules\vue-loader\lib\plugin-webpack4.js:46:13) at webpack (node_modules\webpack\lib\webpack.js:51:13) at processOptions (node_modules\webpack-cli\bin\cli.js:272:16) at yargs.parse (node_modules\webpack-cli\bin\cli.js:364:3) at Object.parse (node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18) at node_modules\webpack-cli\bin\cli.js:49:8 at Object.<anonymous> (node_modules\webpack-cli\bin\cli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (node_modules\webpack\bin\webpack.js:156:2) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch" 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! AppData\Roaming\npm-cache_logs\2020-07-13T08_41_49_430Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ watch: npm run development -- --watch npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ watch 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! AppData\Roaming\npm-cache_logs\2020-07-13T08_41_49_526Z-debug.log

[KaelWD]

I discovered that mix extensions have access to the full webpack config, unlike the mix.webpackConfig(cb) method. You should do this instead of using mix.webpackConfig:

mix.extend('vuetify', new class {
    webpackConfig (config) {
        config.plugins.push(new VuetifyLoaderPlugin())
    }
})
mix.vuetify()

~~I also found this extension which should work too: https://github.com/Nothing-Works/vuetifyjs-mix-extension~~ Mix’s plugin order is stupid: https://github.com/JeffreyWay/laravel-mix/issues/2439#issuecomment-659312335

Laravel is great, but its entire JS setup is garbage. I always use either a custom webpack config or vue-cli when I have to work with it.

[KaelWD]

Swap new VuetifyLoaderPlugin() and new VueLoaderPlugin()