webpack Storybook 6.x和Vue 2在需要额外加载程序时失败

hi3rlvi2 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(177)

正在迁移到Storybook 6.4
我有一个加载Vue组件的故事，但我总是失败，并出现以下错误：

ModuleParseError: Module parse failed: Unexpected token (92:0)
File was processed with these loaders:
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .my-card {

在vue文件中，.my-card正好出现在我的<style>标记之后，因此我怀疑与typescript、babel或webpack有关的问题-特别是没有使用vue-loader加载SFC
我的故事书main.js有framework: "@storybook/vue",我已经将webpackFinal设置为解析“@"、“css”和“scss”
下面是我的.storybook/main.js：

const path = require('path')

  module.exports = {
    stories: [ '../src/**/*.stories.(js|jsx|ts|tsx|mdx)' ],
    addons: [
      '@storybook/addon-essentials',
      '@storybook/addon-actions',
      {
        name: '@storybook/addon-docs',
        options: {
          babelOptions: {
            presets: [
              [
                '@vue/cli-plugin-babel/preset',
                {
                  jsx: false
                }
              ]
            ]
          }
        }
      },
      '@storybook/addon-knobs',
      '@storybook/addon-links',
      '@storybook/addon-notes'
    ],
    webpackFinal: async config => {
      config.resolve.alias = {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, "../src")
      }

      // Sass loader
      config.module.rules.push({
        test: /\.sass$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                indentedSyntax: true,
              },
              prependData: "@import '@/sass/variables.sass'",
            },
          },
        ],
        include: path.resolve(__dirname, '../'),
      })

      config.module.rules.push({
        test: /\.css$/,
          use: [
        'vue-style-loader',
        'css-loader',
      ]
      })

      return config;
    },
    framework: "@storybook/vue",
    features: { postcss: false }
  }

webpack

来源：https://stackoverflow.com/questions/71863970/storybook-6-x-and-vue-2-fails-on-additional-loaders-needed

2条答案

按热度按时间

7dl7o3gd1#

我缺少Vue打字脚本加载器。将此添加到.storybook/main.js有助于：

webpackFinal: async config => {
config.module.rules.push({
      test: /\.ts$/,
      loader: "ts-loader",
      options: { appendTsSuffixTo: [/\.vue$/] },
    });
return config;
}

另外，将我的vue-loader升级到16.8.2也有帮助

赞(0）回复(0）举报 2022-11-13

w8f9ii692#

我有相同的ModuleParseError由于使用SCSS虽然没有使用TypeScript在一个特定的Storybook 6 / Vue 2 / Webpack 5项目。
我通过修改.storybook/main.js的webpackFinal键解决了这个问题，如下所示：

module.exports = {
  // ... other irrelevant config
  // NB: webpackFinal is top level, not nested inside "core"
  webpackFinal: async (config, { configType }) => {
    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  }
}

基于这个来源，首先，这导致了这一点，所以最终的主要之一，需要阅读。
我还可以创建一个.storybook/webpack.config.js并将配置放在其中，如下所示。
请注意，storybook似乎没有在其.storybook目录之外查找webpack配置（就像项目顶层的配置），尽管可以重用或合并它们。

module.exports = {
  // ...irrelevant
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/env"],
            plugins: ["@babel/transform-arrow-functions", "@babel/plugin-syntax-dynamic-import"]
          }
        },
      },
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      // ...irrelevant

旁白：为了在将来帮助进行这种调试，请执行以下操作：
1.读取storybook webpack docs
1.运行类似yarn storybook --debug-webpack的命令

赞(0）回复(0）举报 2022-11-13

我来回答

webpack Storybook 6.x和Vue 2在需要额外加载程序时失败

2条答案

相关问题

热门标签

最新问答