Laravel と Inertia.js と React を使用してStorybookを起動したら`route is not defined`がでて困ったこと

はじめに

こんにちは、エンジニアのkeitaMaxです。

Laravel10 と Inertia.js を使用して React アプリケーションを開発している際に困ったことがあったので備忘録として残しておきます。

困ったこと

<a href={route('register')}></a>

こんな感じでLaravelのrouteを使用してStoryBookを起動したところ、以下のようなエラーが出てしまいました。

route is not defined

が出てしまいました。

解決策

以下のように　storybook/preview.js route 関数のモックを作成しました。

storybook/preview.js

import type { Preview } from "@storybook/react";
import "../resources/css/app.css";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

global.route = (name, params, absolute) => { // ←追加
  return `/${name}`; // ←追加
}; // ←追加

export default preview;

これで無事エラーが出なくなりました。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！