时间戳

首页 > 解决方案 > 模块解析失败：使用 vue-loader 运行 yarn run storybook 时出现意外字符“@”

vue.js - 模块解析失败：使用 vue-loader 运行 yarn run storybook 时出现意外字符“@”

问题描述

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

网络包4.41.0

标签： vue.jsstorybookvue-loader

解决方案

更新：

这导致我另一个错误

[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 命令。

推荐阅读