Vue CLI で作った vue3 プロジェクトに storybook を入れてハマったことまとめ

おことわり
個人メモの意図が強いので、あまり詳細には記載しません。
「とりあえず解決方法だけ知りたい！」という方のみ参考にしていただければと思います。

storybook が立ち上がらない

こんなエラー -> TypeError: Cannot read properties of undefined (reading 'NormalModule')

以下で init し直す

npx sb init --type vue3 --builder webpack5

lang=scss が読み込めない

こんなエラー -> You may need an additional loader to handle the result of these loaders.

.storybook/main.js を以下のように変更

// 変更①
const custom = require("../node_modules/@vue/cli-service/webpack.config.js");

module.exports = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  // 変更②
  webpackFinal: async (config) => {
    const mdxRules = config.module.rules.filter((rule) =>
      /\.mdx/.test(rule.test)
    );
    return {
      ...config,
      module: {
        ...config.module,
        rules: [...mdxRules, ...custom.module.rules],
      },
    };
  },
};

.stories を ts で書くと tsc で怒られる

こんなエラー -> Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?

@types/react を消す

{
  "scripts": {
    "pretest:type": "rimraf ./node_modules/@types/react",
    "test:type": "vue-tsc --noEmit",
  }
}

※ rimraf がなければインストールしてください

build-storybook がエラーになる

こんなエラー -> ENOENT: no such file or directory, open '/path/.storybook/preview.js-generated-config-entry.js'

build script を以下のように変更

{
  "scripts": {
    "build-storybook": "NODE_ENV=development build-storybook"
  }
}