Laravel-mix: mix.js(...) + mix.ts(...) breaks vue-loader

[msiemens]

• Laravel Mix Version: 2.1.11
• Node Version: v10.0.0
• NPM Version: 5.6.0
• OS: macOS 10.12.6

Description:

Using both mix.js(...) and mix.ts(...) breaks Vue + TypeScript components by adding vue-loader twice to the rules resulting in the infamous Failed to mount component: template or render function not defined error.

Steps To Reproduce:

Use a webpack.mix.js which has both mix.js(...) and mix.ts(...) calls. Repository with reproduction example at https://github.com/msiemens/laravel-mix-repro-jsts. Just run yarn dev and then open dist/index.html to see the vue component not working. Then remove the mix.js call from webpack.mix.js to make it work.

To see how vue-loader is added twice in the error case, add a console.trace() call in node_modules/laravel-mix/src/components/Vue.js in webpackConfig()

Seems to be related to #1535

[CalebJTSmith]

I just spent days clipping out code trying to figure out what was going on as I was converting files over to TypeScript. Removing all calls to mix.js fixed it for me - definitely a fun problem.

[raphaelsaunier]

Not my definition of a “fun problem”, but converting everything to mix.ts(…) did fix the issue for me.

[fortael]

Absolutely the same problem with mix.react(). And rewrite everything on react definitely is not solution for me.
https://stackoverflow.com/questions/51089065
https://stackoverflow.com/questions/50832973

[mityukov]

Affects me too.

this works:

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

this does not (Failed to mount component):

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/map.js', 'public/js')
   .react('resources/assets/js/calendar.js', 'public/js');

this works again:

mix.react('resources/assets/js/app.js', 'public/js')
   .react('resources/assets/js/map.js', 'public/js')
   .react('resources/assets/js/calendar.js', 'public/js');

(thank you, @raphaelsaunier !! I've started panicing already =)

[garrensweet]

This is still a problem today. It is not reasonable to switch everything to .react or .ts as things will not work correctly out of the box and re-writing everything to one or the other is simply not an option. Can we get an official response on this @JeffreyWay

[wtchen]

Affects me as well. Seems like an issue that should've been caught by the test suite...

[rtheunissen]

We're facing this issue too and wasted days trying to debug it.

[rtheunissen]

We noticed that using both .js and .react causes this.

[rtheunissen]

Now getting "No matching use for vue-loader is found". I think this is because the Vue plugin is registered when we call .react or something along those lines?

[rtheunissen]

We're forced to use .react for everything now, which is not a nice solution at all.

[msiemens]

@JeffreyWay Could we get any statement on this bug?

[JeffreyWay]

@msiemens Fixed in 4.0.8.