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()
  ]
}

[Lyrkan]

@stupidsongshu As explained above, only adding the VueLoaderPlugin won't work with the current version of Encore because of the extract-text-webpack-plugin. This will be fixed after the Webpack 4 migration (#324) since that plugin is not going to be used anymore.

[caotuiit1997]

@Lyrkan Thank you. It works perfectly!. I have to logging in to give you a thumbs up.

[curry684]

Please consider adding this to the docs until it's fixed ;)

Right now following instructions at https://symfony.com/doc/current/frontend/encore/vuejs.html just leads to a non-working environment without pointer as to how to fix it as it loads v15 by default.

[curry684]

Also btw the link to the "Advanced Options" on that page is dead. Seems impossible to install a stable dev environment right now as upstream also killed v14.

[weaverryan]

Indeed - docs link is broken. Maybe you could open a PR? Encore with Webpack v4 is almost me, but not quite yet.

[giangmd]

@Lyrkan
Thank you so much! It's a chunk.
Save for me many time.

[niketpathak]

An easy peasy fix if you're using Vue-Loader v15 and above:
Update your webpack.config.js

const { VueLoaderPlugin } = require('vue-loader');
Encore
           .setOutputPath('public/build/')
           .... // other usual stuff
           // .enableVueLoader()           // comment this line out!
           .addLoader({
                test: /\.vue$/,
                loader: 'vue-loader'
            })
           .addPlugin(new VueLoaderPlugin())
           .addAliases({
                vue: 'vue/dist/vue.js'
           });

module.exports = Encore.getWebpackConfig();

And that's it!
Here's the working source code and the Reference Tutorial.

[towhare]

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?
thanks alot

[Lyrkan]

Closing this issue since the VueLoaderPlugin is now added automatically by Encore: https://github.com/symfony/webpack-encore/blob/master/lib/plugins/vue.js