webpack-encore: enableVueLoader does not include VueLoaderPlugin?

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 13
Comments: 18 (1 by maintainers)

Commits related to this issue

minor #10042 [Encore] Fix vue-loader installation (dunglas) This PR was merged into the 3.4 branch. Discussion ---------- [Encore] Fix vue-loader installation Encore isn't compatible yet with `vue... — committed to symfony/symfony-docs by javiereguiluz 6 years ago

Most upvoted comments

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?

+155

Lyrkan on May 5, 2018

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

+97

stupidsongshu on May 20, 2018

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.

+17

niketpathak on Aug 9, 2018

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

Gemorroj on Apr 25, 2018

@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).

Lyrkan on May 5, 2018

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 on May 28, 2018

Yep, finally got there 😃 cheers

damien-roche on May 5, 2018

Lovely:

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

Fun times.

damien-roche on May 5, 2018