Webpacker: vue-loader v15 requires VueLoaderPlugin in webpack config

[rlafranchi]

details: https://vue-loader.vuejs.org/migrating.html#migrating-from-v14

cc @ytbryan

[ytbryan]

For anyone reading, the temporary solution is to downgrade to v14.2.2

For webpacker 3:
yarn upgrade [email protected]

For webpacker 4.x:

1. At environment.js, comment out VueLoaderPlugin environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())
2. Then run yarn upgrade [email protected]

@rlafranchi thanks for reporting!

[waldandrade]

plugins: [
new VueLoader.VueLoaderPlugin()
]

[bbugh]

A better temporary solution since vue-loader v15 fixes a bunch of bugs including the css-out-of-order in production bug is to add to environment.js

// environment.js

// Required for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin')
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
)

module.exports = environment

[gauravtiwari]

What's the permanent solution? 😄 Did we fix this in 4.x?

[ytbryan]

Yup, it's fixed in 4.x but the user has to choose the latest vue-loader at rails webpacker:install:vue.

perhaps use vue-loader instead of vue-loader@next?

[msencenb]

@bbugh solution seems to mostly work for me, although I also had to append a new rule into the webpack config that targets vue (or I suppose I was supposed to always be doing this and simply dropped the ball). But... that custom loader seems like it results in my vue loader not respecting my .babelrc plugin of 'transform-class-properties', which causes my app to break on IE11 because of arrow functions. Not sure yet what to do about that.

// Necesary configuration for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin');
environment.plugins.append(
    'VueLoaderPlugin',
    new VueLoaderPlugin()
);
environment.loaders.append('vue', {
    test: /\.vue$/,
    loader: 'vue-loader'
});

[gauravtiwari]

Please try the latest RC, otherwise feel free to open a new issue with more details.

[MelMacaluso]

For anyone going crazy about matching thirty-thousand different front-end packages versions in order to avoid some random undocumented compatibilities on a nightly-bleeding-edge new release of a peerDependency that you had to randomly install on a blue moon in 1834, it needs the following in your webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
plugins: [
  new VueLoaderPlugin()
]