vuetify-loader 1.6 is incompatible with laravel mix #144

SuperDJ · 2020-07-13T08:52:20Z

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. (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. (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

The text was updated successfully, but these errors were encountered:

KaelWD · 2020-07-13T10:29:25Z

Can you show your webpack config?

GregPeden · 2020-07-13T16:58:02Z

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

jijoel · 2020-07-13T17:34:46Z

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

KaelWD · 2020-07-14T05:14:37Z

Ugh of course it's laravel again, I even noted that the plugin order is unexpected in 9fb6ec3

SuperDJ · 2020-07-14T06:31:41Z

Laravel Mix indeed seems to be the culprit as I'm also using it. My webpack config is a bit of a mess but here it is:

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

mix.js( 'resources/js/app.js', 'public/js' );

mix.disableNotifications();

mix.webpackConfig( {
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.esm.js',
            '@': path.resolve( 'resources/js' ),
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
        },
    },

    plugins: [
        new VuetifyLoaderPlugin(),
    ]
} );

mix.options({
    postCss: [
        require('autoprefixer'),
        require('postcss-import'),
        require('postcss-preset-env')
    ],
    terser: {
        extractComments: false,
    },
});

mix.version();

Asgen · 2020-07-15T13:02:00Z

Laravel Mix indeed seems to be the culprit as I'm also using it. My webpack config is a bit of a mess but here it is:

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

mix.js( 'resources/js/app.js', 'public/js' );

mix.disableNotifications();

mix.webpackConfig( {
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.esm.js',
            '@': path.resolve( 'resources/js' ),
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
        },
    },

    plugins: [
        new VuetifyLoaderPlugin(),
    ]
} );

mix.options({
    postCss: [
        require('autoprefixer'),
        require('postcss-import'),
        require('postcss-preset-env')
    ],
    terser: {
        extractComments: false,
    },
});

mix.version();

Hi there! I have this bug while updating. Your webpack config doesn't clear for me how to fix that. What I've found:
In the file /node_modules/vuetify-loader/lib/plugin.js after removing this part of code

    if (!vueRules.length) {
      throw new Error(
        `[VuetifyLoaderPlugin Error] No matching rule for vue-loader found.\n` +
        `Make sure there is at least one root-level rule that uses vue-loader.`
      )
    }

    vueRules.forEach(this.updateRule.bind(this))

build is finishing successfuly.

https://prnt.sc/ti9jde

KaelWD · 2020-07-15T13:28:49Z

That is not a solution, you're effectively disabling the plugin entirely. If you're using laravel you should stay on 1.5 until this is fixed.

Asgen · 2020-07-15T13:38:31Z

Ok, got it. Thanks for answer.

timbunch · 2020-07-15T18:44:49Z

Having the same issue here with Laravel Mix. I was able to downgrade vuetify-loader as a temporary fix. Hoping a more permanent fix is found, though.

KaelWD · 2020-07-16T09:59:49Z

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: laravel-mix/laravel-mix#2439 (comment)

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.

stephenjason89 · 2020-07-16T14:13:20Z

I can confirm that 1.6 is not working with laravel mix and I'm already using https://github.com/Nothing-Works/vuetifyjs-mix-extension

I just downgrade to 1.5 for the meantime.

timbunch · 2020-07-16T15:42:18Z

I can confirm that by doing these two things together, the issue is resolved with the latest Vuetify Loader. Shout out to @KaelWD for this.

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())
    }
})
~~I also found this extension which should work too: https://github.com/Nothing-Works/vuetifyjs-mix-extension~~ Mix's plugin order is stupid: JeffreyWay/laravel-mix#2439 (comment)

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.

stephenjason89 · 2020-07-16T18:48:09Z

@KaelWD Thank you for your great work.
@timbunch Thanks for the heads up

I removed my https://github.com/Nothing-Works/vuetifyjs-mix-extension
and just used the mix.extend.

Npm run dev didn't create the problems anymore
However,
extend('vuetify', new class { webpackConfig (config) { config.plugins.push(new VuetifyLoaderPlugin({ match(originalTag, {kebabTag, camelTag, path, component}) { //all match codes here } }

(match) Doesn't work anymore.
I'm getting a lot of errors
like
Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Again, thank you. Will patiently wait for further instructions.
Will rollback for now.

KaelWD · 2020-07-17T00:21:32Z

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

laberning · 2020-07-17T08:16:09Z

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

KaelWD · 2020-07-17T08:26:55Z

Swap new VuetifyLoaderPlugin() and new VueLoaderPlugin()

stephenjason89 · 2020-07-17T20:23:03Z

Worked like a charm.
Thank you @KaelWD

ElPodge · 2020-07-19T08:36:50Z

I got the same issue and was blocked for 2 days.
This solved it.
Thank you very much !

markowsiak · 2020-07-20T01:58:39Z

Saved me lots of trouble as well. Thanks for the solution @KaelWD 👍

stephenjason89 · 2020-07-20T12:20:23Z

There's still a BUG on this 1.6 release.
After making everything work using extend,
I noticed that my /resources/sass/variables.scss file is not working
I rolled back to version 1.5 while using vuetifyjs-mix-extension and everything seems to be working fine.

Let me know what I can do to make it work. Thank you so much

Nothing-Works · 2020-07-20T13:38:09Z

Thanks all the hard work from @KaelWD and I want to say that the latest version of vuetifyjs-mix-extension does everything for you. You can simply do this mix.vuetify('vuetify-loader'); now.

here is the doc and code repo.

here is a sample laravel app using mix

NOTE: This extension only supports sass-loader ^9.0.0 ATM

minhluan2292 · 2020-07-28T06:31:38Z

Thank you @KaelWD and @laberning

ingdanieljs · 2020-07-30T00:39:47Z

Thank you @KaelWD, your solution save me.

KaelWD · 2021-01-06T16:14:24Z

This has now been fixed upstream: laravel-mix/laravel-mix@b112e13

Currently unreleased but I'm guessing it will be in mix v6.0.7

jonnywilliamson · 2021-01-28T23:36:15Z

This has now been fixed upstream: JeffreyWay/laravel-mix@b112e13

Currently unreleased but I'm guessing it will be in mix v6.0.7

@KaelWD Ah I'm very sorry to come looking again for help, but I've upgraded to mix 6.0.11, and the latest vuetify-loader 1.7.1 and when I revert your work around above to take advantage of this fix, I'm still failing!

My simple mix file

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


mix
    .js('resources/js/app.js', 'public/js')
    .webpackConfig({
        plugins: [new VuetifyLoaderPlugin()]
    })
    .vuetify()
    .vue();

The error when I run npm run dev

[webpack-cli] TypeError: mix.js(...).webpackConfig(...).vuetify is not a function
    at Object.<anonymous> (/Users/jonathan/Code/nova/webpack.mix.js:10:6)
    at Module._compile (/Users/jonathan/Code/nova/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (/Users/jonathan/Code/nova/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at module.exports (/Users/jonathan/Code/nova/node_modules/laravel-mix/setup/webpack.config.js:8:5)
    at /Users/jonathan/Code/nova/node_modules/webpack-cli/lib/webpack-cli.js:908:43
    at Array.map (<anonymous>)

What simple thing am I missing here. It DOES work if I go back to using your work around above. But this has me curious!

Thanks.

dionysiosarvanitis · 2021-01-29T14:14:55Z

@jonnywilliamson you don't need call to vuetify() because you're already using it in webpackConfig

jonnywilliamson · 2021-01-29T18:52:31Z

@jonnywilliamson you don't need call to vuetify() because you're already using it in webpackConfig

Ahh, ok. I knew it would be simple. Thank you.

I assumed because we now use .vue() in mix, that i needed to keep .vuetify()

filipembcruz · 2021-02-17T18:35:59Z

After many issues, I solve this on Laravel 8.

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

if (mix.inProduction()) {
    mix.version();
};

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

kosiachokFM · 2021-12-09T04:26:59Z

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: laravel-mix/laravel-mix#2439 (comment)

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.

Man, your tips are still valid and still working! Thank you VERY VERY MUCH!!! You can not even imagine how much time I lost, so THANK YOU one more time!

KaelWD added need more info need reproduction labels Jul 13, 2020

KaelWD added bug and removed need more info need reproduction labels Jul 14, 2020

KaelWD mentioned this issue Jul 14, 2020

webpackConfig() plugins are merged before the default config laravel-mix/laravel-mix#2439

Closed

KaelWD pinned this issue Jul 16, 2020

KaelWD changed the title ~~vuetify-loader 1.6 results in vue-loader error~~ vuetify-loader 1.6 is incompatible with laravel mix Jul 16, 2020

stephenjason89 mentioned this issue Jul 20, 2020

Breaking with Vuetify Loader 1.6 Nothing-Works/vuetifyjs-mix-extension#13

Closed

KaelWD closed this as completed Jan 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vuetify-loader 1.6 is incompatible with laravel mix #144

vuetify-loader 1.6 is incompatible with laravel mix #144

SuperDJ commented Jul 13, 2020

KaelWD commented Jul 13, 2020

GregPeden commented Jul 13, 2020

jijoel commented Jul 13, 2020

KaelWD commented Jul 14, 2020

SuperDJ commented Jul 14, 2020

Asgen commented Jul 15, 2020 •

edited

Loading

KaelWD commented Jul 15, 2020

Asgen commented Jul 15, 2020 •

edited

Loading

timbunch commented Jul 15, 2020

KaelWD commented Jul 16, 2020 •

edited

Loading

stephenjason89 commented Jul 16, 2020

timbunch commented Jul 16, 2020

stephenjason89 commented Jul 16, 2020 •

edited

Loading

KaelWD commented Jul 17, 2020

laberning commented Jul 17, 2020

KaelWD commented Jul 17, 2020

stephenjason89 commented Jul 17, 2020

ElPodge commented Jul 19, 2020 •

edited

Loading

markowsiak commented Jul 20, 2020

stephenjason89 commented Jul 20, 2020

Nothing-Works commented Jul 20, 2020 •

edited

Loading

minhluan2292 commented Jul 28, 2020 •

edited

Loading

ingdanieljs commented Jul 30, 2020

KaelWD commented Jan 6, 2021

jonnywilliamson commented Jan 28, 2021

dionysiosarvanitis commented Jan 29, 2021

jonnywilliamson commented Jan 29, 2021 •

edited

Loading

filipembcruz commented Feb 17, 2021

kosiachokFM commented Dec 9, 2021 •

edited

Loading

vuetify-loader 1.6 is incompatible with laravel mix #144

vuetify-loader 1.6 is incompatible with laravel mix #144

Comments

SuperDJ commented Jul 13, 2020

KaelWD commented Jul 13, 2020

GregPeden commented Jul 13, 2020

jijoel commented Jul 13, 2020

KaelWD commented Jul 14, 2020

SuperDJ commented Jul 14, 2020

Asgen commented Jul 15, 2020 • edited Loading

KaelWD commented Jul 15, 2020

Asgen commented Jul 15, 2020 • edited Loading

timbunch commented Jul 15, 2020

KaelWD commented Jul 16, 2020 • edited Loading

stephenjason89 commented Jul 16, 2020

timbunch commented Jul 16, 2020

stephenjason89 commented Jul 16, 2020 • edited Loading

KaelWD commented Jul 17, 2020

laberning commented Jul 17, 2020

KaelWD commented Jul 17, 2020

stephenjason89 commented Jul 17, 2020

ElPodge commented Jul 19, 2020 • edited Loading

markowsiak commented Jul 20, 2020

stephenjason89 commented Jul 20, 2020

Nothing-Works commented Jul 20, 2020 • edited Loading

minhluan2292 commented Jul 28, 2020 • edited Loading

ingdanieljs commented Jul 30, 2020

KaelWD commented Jan 6, 2021

jonnywilliamson commented Jan 28, 2021

dionysiosarvanitis commented Jan 29, 2021

jonnywilliamson commented Jan 29, 2021 • edited Loading

filipembcruz commented Feb 17, 2021

kosiachokFM commented Dec 9, 2021 • edited Loading

Asgen commented Jul 15, 2020 •

edited

Loading

Asgen commented Jul 15, 2020 •

edited

Loading

KaelWD commented Jul 16, 2020 •

edited

Loading

stephenjason89 commented Jul 16, 2020 •

edited

Loading

ElPodge commented Jul 19, 2020 •

edited

Loading

Nothing-Works commented Jul 20, 2020 •

edited

Loading

minhluan2292 commented Jul 28, 2020 •

edited

Loading

jonnywilliamson commented Jan 29, 2021 •

edited

Loading

kosiachokFM commented Dec 9, 2021 •

edited

Loading