🔧

Storybook7系をReact + Vite + TypeScriptの構成で動かすのに出たエラーの解消

2023/04/14に公開

React

概要

React + Vite + TypeScriptの構成でStorybookの7系を導入した時に既存で使っているパッケージのバージョンが原因でエラーが出てしまったので対応した。

※今回はStorybookのアップーデートではなく新規追加です。

この記事でわかること

React + Vite + TypeScriptの構成でStorybookの7系を入れる時に下記のいれずかのエラーが出た場合の解消方法。

TypeError: Invalid Version: null
TypeError: (0 , import_vite.createFilter) is not a function
Failed to fetch dynamically imported module: http:// localhost:6006/src/stories/Button.stories.ts

パッケージのバージョン

追加するStorybookのバージョン

storybook@7.0.4

既存パッケージのバージョン

typescript@4.7.4
vite@2.7.1
@vite-js/react@1.0.7

Storybookを動かすまで

Storybookの雛形を生成するには下記のコマンドで行います。

$ npx storybook@latest init

TypeError: Invalid Version: null

まずStorybookの生成コマンドを叩くと下記のエラーが表示されました。

TypeError: Invalid Version: null

直接関係があるissueではないように思うけど、下記のissueを参考にしました。

TypeScriptのバージョンが影響することもあるのかとまずはTypeScriptをアップデートしました。

typescript@4.7.4 -> typescript@5.0.4

TypeScriptのバージョンを上げた所、Storybookの生成コマンドが成功。
次にStorybookを起動する。

$ yarn storybook

ここで再びエラーが出ます。

TypeError: (0 , import_vite.createFilter) is not a function

WARN Failed to load preset: "@storybook/react-vite/preset"
ERR! TypeError: (0 , import_vite.createFilter) is not a function

このエラーにはViteのアップデートで対応。

vite@2.7.1 -> vite@4.2.1

これで再びStorybookを起動すると成功

$ yarn storybook

起動に成功して喜んだのもつかの間、雛形として生成されたストーリーとmdxがエラー。

Failed to fetch dynamically imported module: http:// localhost:6006/src/stories/Button.stories.ts

■ストーリーのエラー

Failed to fetch dynamically imported module: http://localhost:6006/src/stories/Button.stories.ts

■mdxのエラー

ReferenceError: require is not defined
    at http://localhost:6006/node_modules/react/jsx-runtime.js?v=d9b24808:6:3

この2つのエラーには@vite-js/reactをアップデートすることで解消しました。

@vite-js/react 1.0.7 -> 3.1.0

これで晴れて無事にStorybookの7系を動かすことができました。

まとめ

今回既存で使っているパッケージのバージョンが少し古かったり、リリースされたばかりのStorybook7系の使用だったりいろんな要因が重なり解決に時間を要してしまいました。

バージョン関係なので各々の環境に左右される可能性も高いですが、もし同様のエラーが出ている人に少しでも参考になるといいな！