React Router v7の導入で刺さったこと(2025年1月)

まだVite 6には対応していない

React Router v7のCloudflareテンプレートでVite 6を使うと vite-node-miniflare がエラーを吐いて落ちる。@hiogawa/vite-node-miniflare is no longer maintainedとあるようにメンテナンスされていないようで、今後どうなるかは分からない。

Modify to use cloudflareDevProxy and load contents of wrangler.tomlで vite-node-miniflare に依存しなくなった。

Vitestでcan’t detect preambleといって落ちる

上記テンプレートで vitest を実行すると以下のエラーで落ちる。

React Router Vite plugin can’t detect preamble. Something is wrong.

公式ディスカッションの情報で vite.config.ts で以下のようにVitestで実行したときプラグインを読まないように対応すれば回避できる。

export default defineConfig({
  plugins: [
    !process.env.VITEST && reactRouter(),
  ]
})

react-router devでrequire is not defined

react-router dev で画面を表示すると以下のエラーが出力される。

[vite-node-miniflare error] ReferenceError: require is not defined

これはoptimizedDeps.includeでバンドルするべきモジュールがバンドルされないことによって起きていたので、以下のリストを追加した。

export default defineConfig({
  ssr: {
    optimizeDeps: {
      include: [
        "react",
        "react/jsx-runtime",
        "react/jsx-dev-runtime",
        "react-dom",
        "react-dom/server",
        "react-router",
      ]
    }
  }
})

テスト実行時にmswがNo known conditionsエラーを吐く

Error: No known conditions for ”./browser” specifier in “msw” package

テストは msw/node で記述する。このエラーは msw/browser のファイルをnode側で読み込んでしまっている。

Connectのリクエストはmswで割り込めない

const handlers = [
  http.all("/wallet.v1.WalletService/CreateMerchant", () => {}),
]
const server = setupServer(...handlers)
server.listen({ onUnhandledRequest: "warn" })

このとき fetch したリクエストはハンドラを通過するが、Connectのリクエストは反応しない。

または「何もハンドラにマッチしない」ときは

[MSW] Warning: intercepted a request without a matching request handler:

という警告を出力するが、Connectのリクエストには出てこない。

と思っていたら、contextで無を渡していたからだった。

const context = {
  cloudflare: { ... },
  walletClient: {
    createMerchant: vi.fn(),
  },
} satisfies AppLoadContext;

こちらが正しい。

const context = {
  cloudflare: { ... },
  walletClient: {
    createMerchant: vi.fn(() =>
      Promise.resolve({
        $typeName: "wallet.v1.CreateMerchantResponse",
        id: "ok",
      } satisfies CreateMerchantResponse),
    ),
  },
} satisfies AppLoadContext;