Mix with vuetify

I am trying to use VuetifyLoaderPlugin with Laravel mix and I keep getting the following error on edge browser:

"SCRIPT1028: Expected identifier, string or number"

My webpack.mix file looks like this

const mix = require('laravel-mix');

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

mix.webpackConfig({
    plugins: [new VuetifyLoaderPlugin()]
  });

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

mix.sass('resources/sass/app.scss', 'public/css');

I found the issue here https://github.com/vuetifyjs/vuetify/issues/8279

The solution seems to be

// vue.config.js

module.exports = {
  ...,
  transpileDependencies: ['vuetify'],
};

But I don't know how to apply this to laravel mix. Any ideas?

AtlantaJones

6 years ago

Level 4

Did you figure this out? I'm trying to do the same thing.

Fady

6 years ago

Best Answer

Level 6

I did fix it by adding "case-sensitive-paths-webpack-plugin"

here is a working example

const mix = require('laravel-mix');

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

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

var webpackConfig = {
    module: {
        rules: [{
            test: /\.js?$/,
            use: [{
                loader: 'babel-loader',
                options: mix.config.babel()
            }]
        }]
    },
    plugins: [
        new VuetifyLoaderPlugin(),
        new CaseSensitivePathsPlugin(),
    ]
}

mix.webpackConfig(webpackConfig);

1 like

Niush

5 years ago

Level 50

Any solutions for testing vue with Mochapack? It keeps failing while compiling showing the errors to be in the sass/scss of vuetify.

Run dev, prod all are fine. The testing seems to be broken by vuetify.

Please or to participate in this conversation.