vue-loader: You may need an additional loader to handle the result of these loaders.

[mewcrazy]

Hello,

probably a dumb question, but I'm having troubles to get vue-beautiful-chat running in my project. I started with a starter package and a preconfigured webpack, so I'm kinda clueless what to do now. I tried using different loaders like stylus-loader or css-loader, but I probably used them in a wrong way.

ERROR in ./node_modules/vue-beautiful-chat/src/Message.vue?vue&type=style&index=0&lang=scss& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-beautiful-chat/src/Message.vue?vue&type=style&index=0&lang=scss&) 111:0
Module parse failed: Unexpected token (111: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.
|
|
> .sc-message {
|   width: 300px;
|   margin: auto;
 @ ./node_modules/vue-beautiful-chat/src/Message.vue?vue&type=style&index=0&lang=scss& 1:0-118 1:134-137 1:139-254 1:139-254
 @ ./node_modules/vue-beautiful-chat/src/Message.vue
 @ ./node_modules/buble-loader??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-beautiful-chat/src/MessageList.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-beautiful-chat/src/MessageList.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-beautiful-chat/src/MessageList.vue
 @ ./node_modules/buble-loader??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-beautiful-chat/src/ChatWindow.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-beautiful-chat/src/ChatWindow.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-beautiful-chat/src/ChatWindow.vue
 @ ./node_modules/buble-loader??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-beautiful-chat/src/Launcher.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-beautiful-chat/src/Launcher.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-beautiful-chat/src/Launcher.vue
 @ ./node_modules/vue-beautiful-chat/src/index.js
 @ ./node_modules/buble-loader??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ChatBar.vue?vue&type=script&lang=js&
 @ ./src/components/ChatBar.vue?vue&type=script&lang=js&
 @ ./src/components/ChatBar.vue
 @ ./src/components sync nonrecursive [A-Za-z0-9]\w+\.(vue|js)$
 @ ./src/entry/app.js
 @ ./src/entry/client.js
 @ multi webpack-hot-middleware/client ./src/entry/client.js

And here my webpack config:

const path = require('path'),
    { options, env, createConfig } = require('./base'),
    { DefinePlugin } = require('webpack'),
    WebpackBarPlugin = require('webpackbar'),
    HTMLPlugin = require('html-webpack-plugin'),
    VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
ExtractTextPlugin = require('extract-text-webpack-plugin')

const baseConfig = createConfig();

const clientConfig = {
    ...baseConfig,
    entry: './src/entry/client.js',
    plugins: (baseConfig.plugins || []).concat([
        new DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
            'process.env.VUE_ENV': '"client"',
            apiBaseURL: JSON.stringify(env.apiBaseURL && env.apiBaseURL.client || null)
        }),
        new VueSSRClientPlugin(),
        new HTMLPlugin({
            template: 'src/layout.pug',
            // assets injection is controlled by vue-server-renderer with manifest in production
            inject: process.env.NODE_ENV !== 'production'
        }),
        new WebpackBarPlugin({
            name: 'client',
            color: 'green'
        })
    ]),
    optimization: {
        runtimeChunk: {
            name: 'rtm'
        },
        splitChunks: {
            chunks: 'all'
        }
    },
    node: {
        fs: 'empty'
    }
};

clientConfig.module.rules = (baseConfig.module.rules || []).concat([
    {
        test: /sprite\.svg$/,
        loader: 'raw-loader'
    },
    {
        test: options.fonts.test,
        loader: 'file-loader',
        options: {
            context: 'assets',
            name: options.fonts.name
        }
    },
    {
        test: options.images.test,
        exclude: /sprite\.svg$/,
        loaders: [
            {
                loader: 'url-loader',
                options: {
                    context: 'assets',
                    limit: options.images.limit,
                    name: options.images.name
                }
            }
        ]
    },
    {
        test: options.docs.test,
        loader: 'file-loader',
        options: {
            context: 'assets',
            name: options.docs.name
        }
    }
]);

function addStyleRules(finalLoader) {
    const sourceMap = process.env.NODE_ENV !== 'production';
    for (let rule of [
        {
            test: /\.styl(us)?$/,
            use: [
                {
                    loader: 'stylus-loader',
                    options: {
                        import: [
                            path.resolve(process.cwd(), 'assets/css/main.css'),
                            path.resolve(process.cwd(), 'node_modules/kouto-swiss/index.styl'),
                        ],
                        sourceMap
                    },
                },
            ],
        },
        {
            test: /\.css$/,
            use: []
        },
    ]) {
        rule.use = [
            finalLoader || {
                loader: 'vue-style-loader',
                options: { sourceMap }
            },
            {
                loader: 'css-loader',
                options: { sourceMap }
            },
            ...rule.use
        ];
        clientConfig.module.rules.push(rule);
    }
}

if (process.env.NODE_ENV === 'production') {
    const MiniCssExtractPlugin = require('mini-css-extract-plugin'),
        OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'),
        MinifyPlugin = require('terser-webpack-plugin');
    addStyleRules(MiniCssExtractPlugin.loader);
    clientConfig.plugins.push(
        new MiniCssExtractPlugin({ filename: '[name].css?[hash:6]' })
    );
    if (!clientConfig.optimization) clientConfig.optimization = {};
    clientConfig.optimization.minimizer = [
        new MinifyPlugin({
            cache: true,
            parallel: true
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css(\?.*)?$/
        })
    ];
}
else {
    addStyleRules();
    clientConfig.devtool = '#sourcemap';
}

module.exports = clientConfig;

[huhn511]

Did you solve it? I run into the same problem!

[mewcrazy]

Hey, sorry for the late answer. Unfortunately not. I had no experience with Loaders and their general usage, so I stopped trying at some point. I would look into "Vue loading file types" or so, I'm sure you will find something. I close this issue, since it is not a bug of vue-beautiful-chat.