Webpack-encore: [BUG] VueLoaderPlugin missing ?

[Guikingone]

Hi everyone 👋

I've tried to install Vue on a recent project and after installing vue, vue-loader and vue-template-compiler, it seems that something isn't ready to build the assets:

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

Here's the package.json:

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.19.0",
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-es2015": "^6.24.1",
        "ts-loader": "^4.4.2",
        "url-loader": "^1.0.1"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "@material/button": "^0.38.1",
        "@material/card": "^2.1.1",
        "@material/drawer": "^0.38.0",
        "@material/elevation": "^0.38.0",
        "@material/floating-label": "^0.39.0",
        "@material/form-field": "^0.38.1",
        "@material/layout-grid": "^0.34.0",
        "@material/list": "^0.38.1",
        "@material/menu": "^0.38.0",
        "@material/snackbar": "^0.38.0",
        "@material/textfield": "^0.38.1",
        "@material/theme": "^0.38.0",
        "@material/top-app-bar": "^0.38.0",
        "@material/typography": "^0.38.0",
        "css-loader": "^1.0.0",
        "extract-loader": "^2.0.1",
        "file-loader": "^1.1.11",
        "mjml": "^4.1.2",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.0.1",
        "typescript": "^3.0.1",
        "uglifyjs-webpack-plugin": "^1.3.0",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-template-compiler": "^2.6.10"
    }
}

And here's the webpack.config.js:

let Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .setManifestKeyPrefix('build/')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureUglifyJsPlugin()
    .enableVueLoader()
    .enableSassLoader(function(options) {
        options.includePaths = ['./node_modules']
    })
    .addLoader({
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015'],
        }
    })
    .addEntry('pwa', './assets/pwa/app.js')
    .addEntry('portfolio', './assets/javascript/public/Portfolio.js')
    .addEntry('navigation', './assets/javascript/src/UI/TopAppBar.js')
    .addEntry('homepage', './assets/javascript/public/Homepage.js')
    .addStyleEntry('app', './assets/scss/public/index.scss')
    .addStyleEntry('black_app', './assets/scss/public/black_theme.scss')
    .addStyleEntry('home', './assets/scss/public/home.scss')
    .addEntry('notification', './assets/vue/notification.js')
;

module.exports = Encore.getWebpackConfig();

Thanks for the support 🙂

[Kocal]

Hi, I think it's because you use an outdated version of webpack encore that does not automatically push the VueLoaderPlugin when enabling vue support, see configure vue-loader with webpack.

You can try to update to the latest webpack-encore version, or manually call Encore.addPlugin(new VueLoaderPlugin()).

---

Also, I don't think it's a good idea to manually add babel-loader like this.

Instead, you can configure Babel through a configuration file (.babelrc) or with the following Encore method:

Encore.configureBabel(babelConfig => {
    babelConfig.presets = ['es2015'];
});

More reference: Configuring Babel with Encore

[Guikingone]

Hi @Kocal 👋

My apologies for the delay, it was related to the Encore version, I've updated it to the latest one and works perfectly, many thanks for the Babel configuration 👍

I close this issue as it's solved 🙂

[Lyrkan]

Hey @Guikingone,

Just a small thing to add: don't yarn add/npm install things that Encore already provides:

https://github.com/symfony/webpack-encore/blob/cb36619cb728d11dcb53c88c1c647251d43bb43b/package.json#L27-L58

Most of the time it will probably work but since things you install will have a higher priority they'll be used instead of the ones Encore/Webpack really requires (which can lead to really weird issues if you add different versions).

[Guikingone]

@Lyrkan

Thanks for the information, I'm gonna try to improve my package.json according to the existing packages 🙂