How to2024.10.31

Remix + Storybookの環境構築とエラー対処方法

目次

前提条件
RemixでStoryobookをセットアップ
@remix-run/reactのLinkコンポーネントを表示

前提条件

今回使用するRemixとStorybookのバージョンは下記の前提で進めます。

Remix：v2.12.1
Storybook：v8.3.3

RemixでStoryobookをセットアップ

1
Storybookの生成
1npx storybook@latest init
2
vite-sb.config.tsの作成
Remixでviteが使われているためそのままstorybookを起動するとエラーが発生します。
回避するためにはStorybook用のviteの設定ファイルが必要となります。
ファイル名は問いませんがvite-sb.config.tsを下記の内容で作成します。
vite-sb.config.ts
1 2 3 4 5 6 7 8 9 10 11 12import { 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

.storybook/main.tsにviteの設定を追加

.storybook/main.tsのframework部分に作成したviteの設定ファイルを指定します。

.storybook/main.ts

1
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.tsx
1import '../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のバージョンによっては動作しないことがあるため、動作しない場合は利用しているバージョンを確認してください。