Skip to content
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

Closed
thebravecowboy opened this issue Apr 25, 2018 · 18 comments
Closed

enableVueLoader does not include VueLoaderPlugin? #311

thebravecowboy opened this issue Apr 25, 2018 · 18 comments
Labels
Bug Bug Fix

Comments

@thebravecowboy
Copy link

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
Copy link
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
Copy link
Author

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

@Lyrkan
Copy link
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 Bug Fix label Apr 25, 2018
@Gemorroj
Copy link

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
Copy link
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
Copy link

Lovely:

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

Fun times.

@Lyrkan
Copy link
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
Copy link

Yep, finally got there :) cheers

@stupidsongshu
Copy link

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
Copy link
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
Copy link

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

@curry684
Copy link

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
Copy link

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
Copy link
Member

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
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
Copy link

giangmd commented Jul 12, 2018

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

@niketpathak
Copy link

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
Copy link

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

@Lyrkan
Copy link
Collaborator

Lyrkan commented Dec 14, 2018

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

@Lyrkan Lyrkan closed this as completed Dec 14, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Bug Fix
Projects
None yet
Development

No branches or pull requests