Webpack Vue component with css <style> tags fails to build with Module parse failed: Unexpected token

Question

Starting with a clean vue project, I was having issues building .vue components from PrimeVue. These are ready made components and should really not fail to build.

Everytime I try to build, it fails to do so, and seems to fail with the line pointer at the start of the CSS styles.

ERROR in ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css&) 340:0
Module parse failed: Unexpected token (340:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .p-slider {
|   position: relative;
| }
 @ ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& 1:0-119 1:135-138 1:140-256 1:140-256
 @ ./node_modules/primevue/components/slider/Slider.vue
 @ ./node_modules/primevue/slider.js
 @ ./myproject/components/Test.js
 @ ./myproject/components/App.js
 @ ./myproject/main.js

This is my webpack config file:

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    mode: 'development',
    entry: 'main.js',
    output: {
        filename: 'main.bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

What is causing this error, as I am importing the components correctly as stated by the PrimeVue documentation.

Answer 1

Setting a rule in the webpack config to send the .vue files for processing to vue-loader is not enough.

You need to specify how to handle .css files too, and this then gets applied to tags in a .vue file as well. Without this rule, it will not know what to do with the <style> blocks, even if you dont plan on using the .css file part of this.

Update the rules section of the webpack.config.js with the following:

rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]

Also make sure that vue-style-loader and css-loader are installed in package.json.

More information can be found at the manual installation section of the vue-loader documentation, specifically the code example under 'A more complete example webpack config will look like this.'