Remixを使っているプロジェクトでコンポーネントをStorybookで表示しようとすると、Error: useHref() may be used only in the context of a <Router> component.と表示される際の改善方法

RemixのLinkコンポーネントをStorybookで表示しようとするとエラーが発生した。

解決方法

GitHubで議論されている通り、.storybook/preview.tsxのコードを以下のように修正する。

※ChakraUIを使っているので、ChakraProviderが含まれています。使っていなければChakraの部分は削除して使ってください。

import type { Preview } from "@storybook/react";
import { ChakraProvider, Theme } from "@chakra-ui/react";
import { defaultSystem } from "@chakra-ui/react";
import React from "react";
import { createRemixStub } from "@remix-run/testing";
 
const preview: Preview = {
  decorators: [
    (Story) => {
      const RemixStub = createRemixStub([
        {
          path: "/*",
          action: () => ({ redirect: "/" }),
          loader: () => ({ redirect: "/" }),
          Component() {
            return <Story />;
          },
        },
      ]);
      return (
        <ChakraProvider
          children={
            <Theme appearance="light">
              <RemixStub />
            </Theme>
          }
          value={defaultSystem}
        />
      );
    },
  ],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};
 
export default preview;

ポイントはimport { createRemixStub } from "@remix-run/testing";で
github上では、import { unstable_createRemixStub as createRemixStub } from '@remix-run/testing';となっているが、最近unstableじゃなくなったのか、unstable_は消しても良い。

ちなみに

ここにもあるように、Storybookで見るようなコンポーネントにそもそもRemixのようなフレームワークを依存させるべきでないという意見もあります。