模块解析失败:使用vue-loader运行毛线运行故事书时出现意外字符'@'

时间:2019-10-09 11:45:41

标签: vue.js storybook vue-loader

yarn run storybook因错误而失败

具体细节是:

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.

故事书 5.2.3

webpack 4.41.0

1 个答案:

答案 0 :(得分:0)

更新:

这导致我遇到另一个错误

  

[Vue警告]:无法安装组件:模板或渲染函数未安装   定义。在

中找到

添加后便解决了

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;
};

并删除了前一个vue-loader部分。


尝试了不同的选项后,在webpack.config.js文件夹中创建了一个.storybook/文件并包含以下内容的错误得到解决。

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;
};

重要的是要解决这样的加载器插件,例如 require.resolve('vue-loader'),然后再次重新运行 yarn命令。