enableVueLoader does not include VueLoaderPlugin?

[thebravecowboy]

When trying to compile code with Vue-loader, I get a bunch of the following error:

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

When I manually add the VueLoaderPlugin in my webpack.config.js, I get the following error:

Module build failed: ReferenceError: [BABEL] /Users/bgore/Sites/demads.test/public_html/assets/js/organization/Advertiser.vue: Unknown option: base.omit. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name

I imagine this is a problem with my local setup, probably not a bug, but I'm not sure. I can't seem to find anything about this on the wider web.

Config file looks thus:

const { VueLoaderPlugin } = require('vue-loader')
var Encore = require('@symfony/webpack-encore');
Encore
    // Project directory where assets will be stored
    .setOutputPath('assets/build')

    // public path used by the web server
    .setPublicPath('/assets/build')

     // Enable Source maps in dev
    .enableSourceMaps(!Encore.isProduction())
    
     // Cleanup output dir before build
    .cleanupOutputBeforeBuild()
    
     // Show notications
    .enableBuildNotifications()
    
     // Enable SASS/SCSS compilation
    .enableSassLoader()
    
     // Enable Vue SFC compilation
    .enableVueLoader()
    
     // Tried with and without this
     .addPlugin(new VueLoaderPlugin())
    .addEntry('organization/advertiser', './assets/js/organization/advertiser.js');

module.exports = Encore.getWebpackConfig();

Install was done exactly as described on the Symfony site.

Any pointers are greatly appreciated.

[Lyrkan]

Hi @thebravecowboy,

You probably use vue-loader v15 which was released yesterday and introduces a lot of changes compared to v14. One of these changes is that you have to use an extra plugin: VueLoaderPlugin (that's not handled yet by Encore).

I'm not sure what causes the issue you're having (we don't set that base.omit option... maybe it's related to the content of your Advertiser.vue file?) but there's a chance that we'll have to make some modifications in order to support that version of the vue-loader.

In the meantime could you try removing your version of the vue-loader/VueLoaderPlugin and adding vue-loader@^14.2.2 instead?

[thebravecowboy]

You're a lifesaver! That worked like a charm. Thank you for this project, too, it's exactly what my team needed.

[Lyrkan]

Great :)

I'll leave this issue open though, so we don't forget to check if we've to change something in order to support vue-loader v15!

[Gemorroj]

I think the new vue-loader is not very stable yet. It's better to wait a bit for the stabilization.

[Lyrkan]

It looks like that omit option is set by the extract-text-webpack-plugin.

I think it wasn't an issue before because the old version of the loader didn't actually use webpack rules when encountering a language block (see this), so the extract-text-webpack-plugin wasn't used for them.

That new version is going to be a bit harder to implement... and I'm not even sure how to allow both languages blocks without the extract-text-webpack-plugin and "normal" CSS imports with the extract-text-webpack-plugin.

[damien-roche]

Lovely:

$ yarn add vue-loader-plugin@^14.2.2
error Couldn't find package "vue-loader-plugin" on the "npm" registry

Fun times.

[Lyrkan]

@damien-roche I meant vue-loader@^14.2.2 (the plugin isn't needed for v14 and is part of that same package in v15).

[damien-roche]

Yep, finally got there :) cheers

[stupidsongshu]

https://github.com/vuejs/vue-loader/tree/next

vue-loader v15 has major breaking changes.
If your vue-loader version is 15 and above ,you should add VueLoaderPlugin like this in your webpack config:

// webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain .js files
      // AND <script> blocks in vue files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain .css files
      // AND <style> blocks in vue files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      // this will apply to both plain .scss files
      // AND <style lang="scss"> blocks in vue files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              data: '$color: red;'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ]
}