Module parse failed: Unexpected character '@' while running yarn run storybook with vue-loader

Question

yarn run storybook failed with error

specific details are :

Module parse failed: Unexpected character '@'
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.

Storybook 5.2.3

webpack 4.41.0

Answer 1

Update:

This lead me to another error

[Vue warn]: Failed to mount component: template or render function not defined. found in

and it got resolved when I added

const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules.push({
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true
                },
            }
        ],
    });

    return config;
};

and removed the previous vue-loader section.

---

After trying out different options, error got resolved when a webpack.config.js file was created in .storybook/ folder with the following content.

const path = require('path');

module.exports = async ({ config, mode }) => {
    config.module.rules.push({
        test: /\.vue$/,
        loader: require.resolve('vue-loader'),
        include: path.resolve(__dirname, '../src/'),
    });
    return config;
};

Important thing is resolving loader plugin like this require.resolve('vue-loader') and then re-run the yarn command again.