Remix v2 に Storybookを導入してみた

記事書くきっかけ

RemixにStorybookをインストールした際、デフォルトでは以下のようなエラーが発生...🤯
vite pluginの Remixがあるとダメっぽい...🤔

Running Storybook

> remix-v2.8-storybook@ storybook /Users/ryosukebe/Develop/Remix/remix-v2.8-storybook
> storybook dev -p 6006 "--initial-path=/onboarding" "--quiet"

@storybook/cli v8.0.5

info => Starting manager..
info => Starting preview..
=> Failed to build the preview
Error: The Remix Vite plugin requires the use of a Vite config file

Remix v2.7のVite対応からの記事を探した時なかったので、今回執筆しました。

フレームワーク・ライブラリ ※ 執筆時(2024.3.29時点)でのLatest

ツール	バージョン
Remix	v2.8
Storybook	v8.0.5

---

Setup 手順

1. Remixのインストール

pnpm dlx create-remix@latest

2. Storybookのインストール

pnpm dlx storybook init 

この時点では、先ほどのエラーで表示されない...🥺

3. Storybook用のvite-sb.config.tsを生成

storybook用のvite configファイルを作成

touch vite-sb.config.ts

vite-sb.config.ts

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()],
  };
});

4 .storybook/main.ts の修正

options builder を利用して、storybook用のvite.configファイルを指定

main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {
+     builder: {
+       viteConfigPath: 'vite-sb.config.ts',
+     }
    },
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

$ pnpm storybook         

> remix-v2.8-storybook@ storybook /Users/ryosukebe/Develop/Remix/remix-v2.8-storybook
> storybook dev -p 6006

@storybook/cli v8.0.5

info => Starting manager..
info => Starting preview..
info Using tsconfig paths for react-docgen
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 8.0.5 for react-vite started            │
│   365 ms for manager and 898 ms for preview         │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.10.108:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
2:03:14 AM [vite] ✨ new dependencies optimized: @storybook/blocks, @mdx-js/react
2:03:14 AM [vite] ✨ optimized dependencies changed. reloading
2:03:16 AM [vite] ✨ new dependencies optimized: react/jsx-dev-runtime
2:03:16 AM [vite] ✨ optimized dependencies changed. reloading

でけた！！！✨✨✨

今後も,こちらの記事はアップデートしていきたいと思います🧑‍💻

Github ソース

https://github.com/mororyou/remix-v2.8-storybook-v8

参考サイト

https://github.com/storybookjs/storybook/discussions/25519