How to
Remix + Storybookの環境構築とエラー対処方法
前提条件
今回使用するRemixとStorybookのバージョンは下記の前提で進めます。
- Remix:v2.12.1
- Storybook:v8.3.3
RemixでStoryobookをセットアップ
- 1Storybookの生成
1
npx storybook@latest init
- 2vite-sb.config.tsの作成
Remixでviteが使われているためそのままstorybookを起動するとエラーが発生します。
回避するためにはStorybook用のviteの設定ファイルが必要となります。ファイル名は問いませんがvite-sb.config.tsを下記の内容で作成します。
vite-sb.config.ts1 2 3 4 5 6 7 8 9 10 11 12
import { defineConfig, loadEnv } from 'vite' import tsconfigPaths from 'vite-tsconfig-paths' export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), '') process.env = { ...process.env, ...env } return { plugins: [tsconfigPaths()], } })
下記issueのコードを参考にしました
https://github.com/storybookjs/storybook/issues/25154#issuecomment-1852976172 - 3.storybook/main.tsにviteの設定を追加
.storybook/main.tsのframework部分に作成したviteの設定ファイルを指定します。
.storybook/main.ts1 2 3 4 5 6 7 8 9 10
const config: StorybookConfig = { ..., framework: { options: { builder: { viteConfigPath: 'vite-sb.config.ts', }, } } }
- 4(tailwindのCSSをstorybookで読み込む)
もしtailwindを使用している場合はapp配下のtailwind.cssをStorybookで読み込む必要があります。
任意の場所に下記のコードを追加してください。.storybook/preview.tsx1
import '../app/tailwind.css'
ここまでの対応すれば、Remix内で作成したコンポーネントをStorybookで表示できるようになります。
@remix-run/reactのLinkコンポーネントを表示
Remixを使っているとStorybookを起動したときに多くの人がぶち当たるであろう問題があります。
@remix-run/reactからimportしたLinkコンポーネントをStorybookで表示しようとするとエラーが発生してしまいます。
1
useHref() may be used only in the context of a <Router> component.
この問題に対処するためにはpreview.tsに指定を追加します。
stortbook/preview.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
import type { Preview } from '@storybook/react'; import { createRemixStub } from '@remix-run/testing'; const preview: Preview = { // ...他の設定項目 decorators: [ (Story) => { const RemixStub = createRemixStub([ { path: '*', action: () => ({redirect: '/'}), loader: () => ({redirect: '/'}), Component: () => <Story />, }, ]); return <RemixStub />; }, ], };
decoratorsの指定を追加することでuseHrefのエラーが消えるようになります。
remixとStorybookのバージョンによっては動作しないことがあるため、動作しない場合は利用しているバージョンを確認してください。