Webpack CLI error on reload (watch)

Hi !

Since I update from Vue2 to Vue3 and Laravel Mix v6, I got this error when I run npm run watch :

[webpack-cli] Error: The loaded module contains errors
    at C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\dependencies\LoaderPlugin.js:110:11
    at C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\Compilation.js:1635:8
    at C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\util\AsyncQueue.js:347:5
    at Hook.eval [as callAsync] (eval at create (C:\xampp\htdocs\shareyourproject\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._handleResult (C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\util\AsyncQueue.js:317:21)
    at C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\util\AsyncQueue.js:300:11
    at C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\Compilation.js:1336:15
    at C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\HookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (C:\xampp\htdocs\shareyourproject\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (C:\xampp\htdocs\shareyourproject\node_modules\webpack\lib\Cache.js:107:20)

It compile well the first time but I got this error when webpack tries to reload after changes.

I have no idea from where it can come from, and I found nothing on the internet...

daito

5 years ago

Level 1

I don't know if there is a something with that too, but I'm using Typescript also.

rafwell

4 years ago

Best Answer

Level 1

Hi, I've faced same issue. Try add transpileOnly:true to the options on you webpack.mix.js, like that:

.webpackConfig({
    devtool: 'source-map',
    module: {
        rules: [
            {
              test: /\.tsx?$/,
              loader: 'ts-loader',
              options: {
                appendTsSuffixTo: [/\.vue$/],
                transpileOnly:true
              }
            },
            {
              test: /\.vue$/,
              loader: 'vue-loader',
            }
        ]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
    }
})

That's fixed to me, after 5 days of tries and no success. Hope can help u.

4 likes

GaoFan98

4 years ago

Level 6

@rafwell Thank you very much! I spent 3 days and did not figure out how to solve this issue. You saved my another couple of days of researching

Angel892

1 year ago

Level 1

@rafwell Thank you very much

daito

4 years ago

Level 1

Thanks for your reply. Unfortunately, I switched solution, and I have separated my project into two apps (Back/API with Laravel and Front with VueJS CLI).

I lost so much time trying to solve this issue...

I'm sure it will help others !

1 like

yaroslawww

4 years ago

Level 6

Thank you it helps. You can add options using 3 parameter:

mix.ts('resources/js/app.ts', 'js', { transpileOnly: true }).vue();

3 likes

Please or to participate in this conversation.