New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enableVueLoader does not include VueLoaderPlugin? #311

Open
thebravecowboy opened this Issue Apr 25, 2018 · 17 comments

Comments

Projects
None yet
@thebravecowboy

thebravecowboy commented Apr 25, 2018

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

This comment has been minimized.

Collaborator

Lyrkan commented Apr 25, 2018

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

This comment has been minimized.

thebravecowboy commented Apr 25, 2018

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

@Lyrkan

This comment has been minimized.

Collaborator

Lyrkan commented Apr 25, 2018

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!

@Lyrkan Lyrkan reopened this Apr 25, 2018

@Lyrkan Lyrkan added the bug label Apr 25, 2018

@Gemorroj

This comment has been minimized.

Gemorroj commented Apr 25, 2018

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

@Lyrkan

This comment has been minimized.

Collaborator

Lyrkan commented Apr 26, 2018

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

This comment has been minimized.

damien-roche commented 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.

@Lyrkan

This comment has been minimized.

Collaborator

Lyrkan commented May 5, 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).

@damien-roche

This comment has been minimized.

damien-roche commented May 5, 2018

Yep, finally got there :) cheers

@stupidsongshu

This comment has been minimized.

stupidsongshu commented May 20, 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()
  ]
}
@Lyrkan

This comment has been minimized.

Collaborator

Lyrkan commented May 20, 2018

@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

This comment has been minimized.

caotuiit1997 commented May 24, 2018

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

@curry684

This comment has been minimized.

curry684 commented May 28, 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

This comment has been minimized.

curry684 commented May 28, 2018

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

This comment has been minimized.

Member

weaverryan commented May 28, 2018

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

javiereguiluz added a commit to symfony/symfony-docs that referenced this issue Jul 11, 2018

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-loader` 15 (symfony/webpack-encore#311). It leads to a broken install with a non-obvious error message.

In the meantime, we should hint users to install v14.

Commits
-------

c48e4b4 [Encore] Fix vue-loader installation
@giangmd

This comment has been minimized.

giangmd commented Jul 12, 2018

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

@niketpathak

This comment has been minimized.

niketpathak commented Aug 9, 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.

@towhare

This comment has been minimized.

towhare commented Nov 2, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment