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

Migrating to Storybook 6.4

I have a story that is loading a Vue component and I keep failing with the following errors:

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 {

That .my-card appears right after my <style> tag in the vue file so I'm suspecting something with regards to typescript, babel or webpack - specifically not using the vue-loader to load the SFC

My storybook main.js has framework: "@storybook/vue", I've set webpackFinal to resolve "@", "css" and "scss"

here is my .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 }
  }

CodePudding user response：

I was missing Vue typescript loader. adding this to .storybook/main.js helped:

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

also upgrading my vue-loader to 16.8.2 helped