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

Question

迁移到 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.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 }
  }

Answer 1

我缺少 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帮助

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

Storybook 6.x and Vue 2 fails on additional loaders needed

webpack

vue.js

storybook