Storybook 6.x 和 Vue 2 在需要额外的加载器时失败

迁移到 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 {

.my-card 出现在 vue 文件中我的 <style> 标记之后,所以我怀疑关于 typescript、babel 或 webpack 的某些内容 - 特别是不使用 vue-loader 加载 SFC

我的故事书 main.jsframework: "@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 }
  }
stack overflow Storybook 6.x and Vue 2 fails on additional loaders needed
原文答案
author avatar

接受的答案

我错过了 Vue 打字稿加载器。将此添加到 .storybook/main.js 有助于:

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

升级我的 vue-loader16.8.2 也有帮助


答案:

作者头像

由于使用 SCSS,我有相同的 ModuleParseError 虽然在特定的 Storybook 6 / Vue 2 / Webpack 5 项目中没有使用 TypeScript。

我通过将 webpackFinal.storybook/main.js 键修改为 documented 来解决它:

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

首先基于 this source 导致 this 最终导致主要的 one that need be read

我也可以创建一个 .storybook/webpack.config.js 并将配置放在那里,如下所示。

请注意,storybook 似乎并没有在其 .storybook 目录之外查找 webpack 配置(如项目顶层的配置),尽管它是 possible to reuse or merge them in

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
  2. 运行 yarn storybook --debug-webpack 之类的命令