Zenn
🍚

Remix v2がリリースされたのでアップグレードする

2023/10/21に公開
Remix
tech

はじめに

2023/09/16(土)に Remix v2 がリリースされました!👏👏👏

2023 年 10 月 17 日現在は v2.1.0 が最新バージョンになっています。

今回は Remix のアップグレードを行なっていきます。

個人開発で Remix を使っているのですが、その中でprismaとremix-authとremix-auth-formとremix-validated-formと@remix-validated-form/with-zodを使っているので、先にそちらのバージョンを上げておきます。

npm install prisma @prisma/client remix-auth remix-auth-form remix-validated-form zod zod-form-data @remix-validated-form/with-zod

アップグレードしていく

こちらの参考動画を元にアップグレードを行いました。

Remix v2 にアップグレード

以下を実行します。upgrade-remix@0.5.0をインストールするか聞かれるので yes にします。

npx upgrade-remix latest

ActionFunctionArgs, LoaderFunctionArgs に書き換える

ActionArgsをActionFunctionArgsに、LoaderArgsをLoaderFunctionArgsに書き換えます。

- import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+ import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";

V2_MetaFunction を MetaFunction に書き換える

app/routes/_index.tsxのV2_MetaFunctionをMetaFunctionに書き換えます。

- import type { V2_MetaFunction } from "@remix-run/node";
+ import type { MetaFunction } from "@remix-run/node";

- export const meta: V2_MetaFunction = () => {
+ export const meta: MetaFunction = () => {
  return [{ title: "ShInly" }];
};

Response を書き換える

app/entry.server.tsxのResponseを``に書き換える。

- import { Response } from "@remix-run/node";
+ import { createReadableStreamFromReadable } from "@remix-run/node";

-   new Response(body, {
+   new Response(createReadableStreamFromReadable(body), {

remix.config.js を書き換える

remix.config.jsを以下のように書き換えます。

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  serverModuleFormat: "cjs",
-   future: {
-     v2_dev: true,
-     v2_errorBoundary: true,
-     v2_headers: true,
-     v2_meta: true,
-     v2_normalizeFormMethod: true,
-     v2_routeConvention: true,
-   },
-   tailwind: true,
};

最後に

今回は Remix のバージョンを v2 に上げてきました。

リリースノートを読んで見込んで v2 への理解を深めていこうと思います！

ここまでお読みいただきありがとうございました！

Discussion