StroyBook v6.5.16 & TypeScript v5.0.2で発生したTypeErrorの解決

概要

Next.jsのプロジェクトにStorybookを導入し、起動したら以下のエラーが発生した。

TypeError: typescript_1.default.createIdentifier is not a function 

1ヶ月、２ヶ月ほど前は発生しなかったので最近発生したみたいで、以下の情報が見つかった。

• https://qiita.com/rikuto125/items/5f54c1dd95085c3276a4
• https://github.com/storybookjs/storybook/issues/21642

ただ、私の場合は解決せず、上記のイシューから辿ったreact-docgen-typescript-plugin自体のイシューでコメントされている方法で解決した。

• https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78#issuecomment-1409224863

環境

• Node.js v18.15.0
• NPM v9.5.0
• Next.js v13.2.4
• TypeScript v5.0.2
• StroyBook v6.5.16

対応方法

react-docgen-typescript-pluginをインストールする。

npm i --save-dev react-docgen-typescript-plugin

.storybook/main.jsに以下を追加する。

  "typescript": {
    "reactDocgen": "react-docgen-typescript-plugin"
  },

.storybook/main.jsの最終形は以下の通り。
導入しての起動でエラーなので、デフォルトの状態に上記を追加した形となる。

module.exports = {
  "typescript": {
    "reactDocgen": "react-docgen-typescript-plugin"
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}