Remix × StorybookでError: useHref() may be used only in the context ...

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の部分は削除して使ってください。

preview.tsx

 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のようなフレームワークを依存させるべきでないという意見もあります。