Remix を React router v7 に移行

React Router の remix からのアップグレードガイドを通りに基本進める

 codemodを実行する（自動化）npx codemod remix/2/react-router/upgrade
をしたが、以下の点を手動で対応

Ryosuke Miyamoto

npm i で '@react-router/css-bundle@^7.0.0' is not in this registry. になってしまったので、
"@react-router/css-bundle": "^7.0.0"　を削除。

react-router/css-bundle なくてもいいのかは、ちゃんと調べてないけど、dev は動いた。

Ryosuke Miyamoto

npx npm-check-updates で諸々 latest に

"@react-router/node": "^7.1.1",
"@react-router/serve": "^7.1.1",
"react-router": "^7.1.1",
"react-router-dom": "^7.1.1",
"@react-router/dev": "^7.1.1",

Ryosuke Miyamoto

以下は、 codemod ではいらなかったので、手動で追加

+import { flatRoutes } from "@react-router/fs-routes";

npm i @react-router/fs-routes

Ryosuke Miyamoto

以下の @sentry/remix のエラーが出たが、おそらくまだ sentry に React Router v7 のフレームワーク版？が対応されてないので、一旦ここまで。
[vite] Internal server error: Failed to resolve entry for package "@sentry/remix". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "@sentry/remix" package
https://github.com/getsentry/sentry-javascript/issues/14519

Ryosuke Miyamoto

あと、import {json} from "react-router"; の json 削除も手動でやった。
シンプルに json を外せばいい。

export async function loader({ params }: Route.LoaderArgs) {
  const product = await fakeDb.getProduct(params.pid);
  return product;
}

Ryosuke Miyamoto

あと 401 で返してたところがあったので、 data に書き換え

    return json("Unauthorized access", {
      status: 401,
    });

↓

    throw data("Unauthorized access", { status: 401 });