Vue CLI 3 vue.config.js compilation “Unknown word” error

Question

Trying to get up and running with a Vue CLI 3 app that integrates Cesium but, am running into what appears to bewebpack configuration issues. The setup is pretty simple so I'm scratching my head on why it would be failing...

The error I am receiving is when webpack is trying to build/compile. Error is:

error in ./src/components/cesium-map.vue?vue&type=style&index=0&lang=css&

Syntax Error: Syntax Error

(5:1) Unknown Word

// load the styles var content = require("!!../../node_modules/css-loader/index.js...

If I remove the <style /> block from the CesiumMap component then the app builds/compiles and runs.

App.vue

<script>
    import CesiumMap from '@/components/cesium-map.vue'

    export default {
        name: 'app',
        component: {
            CesiumMap
        }
    }

</script>

<template>
    <v-container id="app">
        <v-app dark>
            <CesiumMap />
        </v-app>
    </v-container>
</template>

cesium-map.vue (Component)

<script>
    export default {
        name: 'cesium-map',
    }

</script>

<template>
    <v-container id="cesium-map">

    </v-container>
</template>

<style>
    #cesium-map .cesium-viewer-bottom {
        display: none;
    }
</style>

vue.config.js

require('dotenv-flow').config();

const path = require('path');
const webpack = require('webpack');
const copyWebPackPlugin = require('copy-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

const isProd = (process.env.NODE_ENV === 'production');

module.exports = {
    configureWebpack: webpackConfig => {
        let moduleRules = [
            {
                test: /\.css$/,
                use: {
                    !isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
                    'css-loader
                }
            },
            {
                test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
                use: ['url-loader']
            }

        ];

        if(isProd) {
            moduleRules.push({
                test: /\.js$/,
                enforce: 'pre',
                include: path.resolve(__dirname, cesiumSource),
                use: [{ 
                    loader: 'strip-pragma-loader',
                    options: {
                        pragma: {
                            debug: false
                        }
                    }
                }]
            })
        }

        return {
            plugins: [
                new miniCssExtractPlugin({
                    filename: "[name].css",
                    chunkFilename: "[id].css"
                }),
                new webpack.ProvidePlugin({
                    '_': 'lodash',
                    'moment': 'moment',
                    'Promise': 'bluebird',
                    'cesium': path.resolve(__dirname, cesiumSource)
                }),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, cesiumWorkers),
                    to: 'Workers'
                }]),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, 'Assets'),
                    to: 'Assets'
                }]),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, 'Widgets'),
                    to: 'Widgets'
                }]),
                new copyWebPackPlugin([{
                    from: path.join(cesiumSource, 'ThirdParty'),
                    to: 'ThirdParty'
                }]),
                new webpack.DefinePlugin({
                    CESIUM_BASE_URL: JSON.stringify('/')
                })
            ],
            module: {
                rules: moduleRules
            },
            output: {
                sourcePrefix: ''
            },
            amd: {
                toUrlUndefined: true
            },
            resolve: {
                mainFiles: ['index'],
                extensions: ['.js', '.json', '.vue'],
                alias: {
                    'vue$': 'vue/dist/vue.esm.js',
                    'cesium': path.resolve(__dirname, cesiumSource)
                }
            }
        }
    }
}

As always any help would be greatly appreciated!

Answer 1

Interestingly enough, I removed the below from the webpack module rules and all appears to be working correctly for my use-case with Cesium.

{
    test: /\.css$/,
        use: {
            !isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
        'css-loader
    }
}