vuetify-loader: 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 29 (7 by maintainers)

Most upvoted comments

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.

+36

KaelWD on Jul 17, 2020

Swap new VuetifyLoaderPlugin() and new VueLoaderPlugin()

KaelWD on Jul 17, 2020

I get the same error and had to revert to 1.5. I am using Laravel Mix 5.0.x for bundling.

GregPeden on Jul 13, 2020

I get the same issue, also using Laravel Mix 5.0 for bundling.

I reduced it to a minimal case to reproduce the issue:

laravel new test
yarn add --dev vuetify vuetify-loader
Set webpack.mix.js to:

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin({
                options: {}
            }),
        ]
    });

run yarn dev; it will fail
yarn add --dev vuetify-loader@1.5.0
run yarn dev; it will succeed

jijoel on Jul 13, 2020

I’m experiencing exactly the same problem without using laravel. Here is a completely stripped down version of the webpack-config:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

module.exports = () => ({
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
  plugins: [
    new VuetifyLoaderPlugin(),
    new VueLoaderPlugin(),
  ],
});

It runs fine against vuetify-loader 1.5 but causes vue-loader 15 currently does not support vue rules with oneOf if I use vuetify-loader 1.6

laberning on Jul 17, 2020

Ah yeah I forgot to mention that you need mix.vuetify() after that.

KaelWD on Jul 17, 2020