Closed8
Remix+CloudflareでWebサイトを作る 44（Requestの型エラー修正、Prisma→Drizzleへの移行完了）
saneatsu
【2024-11-23】load-context.tsのRequestの型をinterface Requestではなくinterface Request<CfHostMetadata = unknown, Cf = CfProperties<CfHostMetadata>>にしたい
背景
Cloudflare PagesからCloudflare Workersに移行中。
load-context.ts をこのように書いた。
load-context.ts
import type { PlatformProxy } from "wrangler";
type GetLoadContextArgs = {
request: Request;
context: {
cloudflare: Omit<PlatformProxy<Env>, "dispose" | "caches" | "cf"> & {
caches: PlatformProxy<Env>["caches"] | CacheStorage;
cf: Request["cf"]; // ここでエラー発生
};
};
};
declare module "@remix-run/cloudflare" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface AppLoadContext extends ReturnType<typeof getLoadContext> {
// This will merge the result of `getLoadContext` into the `AppLoadContext`
}
}
export function getLoadContext({ context }: GetLoadContextArgs) {
return context;
}
Remix + Cloudflare WorkersのアプリをCLIから作ってReponseにホバーすると型がinterface Request<CfHostMetadata = unknown, Cf = CfProperties<CfHostMetadata>>となっていたが、エラー発生時はinterface Requestになっていた。
解決方法
Remix + Cloudflare WorkersのアプリをCLIから作ったリポジトリと比較して、以下の3行を修正してpnpm iをしてVSCodeをリロードしたら治った。
この3つのうちどこの修正が効いたか確かめるために元に戻していったが、元に戻してもエラーが再発しなかったためわからなかった。
最初に tsconfig.json だけを修正しても治らなかったからpackage.jsonも修正も効いたのか？？
わからんが治ってしまった。
package.json
"devDependencies": {
- "@cloudflare/workers-types": "^4.20240925.0",
+ "@cloudflare/workers-types": "^4.20241112.0",
- "wrangler": "3.87.0"
+ "wrangler": "^3.78.12"
},
tsconfig.json
"compilerOptions": {
"types": [
"@remix-run/cloudflare",
"vite/client",
+ "@cloudflare/workers-types/2023-07-01"
],
【2024-11-25】最近見た良かった記事をメモ
Remix
Cloudflare
SPA, SSR, SSG
React
Drizzle
キャッシュ
saneatsuDurable Object
強整合
結果整合
例
まとめ
saneatsu
【2024-11-28】loaderの値を<Suspence>で表示しようとするとエラーになる
エラー
<Suspense> <Await>ではエラーがでているがTerminalを見るとDBの値は正しく取得できている。
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Uncaught Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
また、loaderの中でawaitを使って<Suspence>を使わないようにしてみると次は以下のエラーが発生する。
Uncaught SyntaxError (at chunk-GTU7F3UE.js?v=5c439831:4544:11)
at Object.decodeInitial
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
The above error occurred in the <RemixBrowser> component:
at RemixBrowser
at I18nextProvider (
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
原因を探る
Prisma→Drizzle用に作ったこのリポジトリを使ってデバッグしていく。
以下のファイルを全部同じにしてみたけど、デバッグ用リポジトリだと正しく動く。
db/index.ts
db/schema.ts
routes/root.tsx
routes/entry.server.ts
routes/entry.client.ts
routes/_index/route.tsx
vite.config.ts
load-context.ts
server.ts
ほぼ同じだけどな？？
全然わからん...。
もはやデバッグ用リポジトリをベースに、元のコードを追加していくほうが早い気がしてきたぞ。
saneatsu解決方法
1つずつ差分確認していったけど以下が原因だった。
発見むっず〜。
package.json
- "remix-i18next": "^6.4.1",
+ "remix-i18next": "^7.0.0",
その他
next-themesを使っている箇所でmouted &&にしているとサーバーでもConsoleでもエラーがでないが画面が真っ白のまま何も表示されないので外した。
ThemeProvider.tsx
import { ThemeProvider as NextThemeProvider } from "next-themes";
import type { ThemeProviderProps } from "next-themes/dist/types";
import { useEffect, useState } from "react";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
const [mounted, setMounted] = useState<boolean>(false);
useEffect(() => {
setMounted(true);
return () => setMounted(false);
}, []);
- return mounted && <NextThemeProvider {...props}>{children}</NextThemeProvider>;
+ return <NextThemeProvider {...props}>{children}</NextThemeProvider>;
}
エラー: TypeError: Cannot convert undefined or null to object
remix-i18next のバージョン変更に伴いentry.client.tsとentry.server.tsでエラーがでている。
entry.client.ts
このエラーが発生するとホットリロードが実行されない。
entry.client.tsx:52 TypeError: Cannot convert undefined or null to object
at Function.values (<anonymous>)
at getInitialNamespaces (
Before
entry.client.tsx
/**
* By default, Remix will handle hydrating your app on the client for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/file-conventions/entry.client
*/
import { StrictMode, startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
import { RemixBrowser } from "@remix-run/react";
import i18next from "i18next";
import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
import resourcesToBackend from "i18next-resources-to-backend";
import { I18nextProvider, initReactI18next } from "react-i18next";
import { getInitialNamespaces } from "remix-i18next/client";
import { i18nextConfig } from "~/config/i18n";
async function main() {
await i18next
.use(initReactI18next)
.use(resourcesToBackend(i18nextConfig.resources))
.use(I18nextBrowserLanguageDetector)
.init({
...i18nextConfig,
ns: getInitialNamespaces(),
detection: {
// htmlTagの検出のみを有効にして、remix-i18nextでサーバーサイドの言語のみを検出する
// `<html lang>` 属性を使用することで、サーバーサイドで検出された言語をクライアントに伝えることができる
order: ["htmlTag"],
// htmlTagしか使わないので、ブラウザに言語をキャッシュする理由はない
caches: [],
},
});
startTransition(() => {
hydrateRoot(
document,
<I18nextProvider i18n={i18next}>
<StrictMode>
<RemixBrowser />
</StrictMode>
</I18nextProvider>,
);
});
}
main().catch((error) => console.error(error));
After
ここに書いてあるコードに変える
entry.client.tsx
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import i18n from "./i18n";
import i18next from "i18next";
import { I18nextProvider, initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import { getInitialNamespaces } from "remix-i18next/client";
async function hydrate() {
await i18next
.use(initReactI18next) // Tell i18next to use the react-i18next plugin
.use(LanguageDetector) // Setup a client-side language detector
.use(Backend) // Setup your backend
.init({
...i18n, // spread the configuration
// This function detects the namespaces your routes rendered while SSR use
ns: getInitialNamespaces(),
backend: { loadPath: "/locales/{{lng}}/{{ns}}.json" },
detection: {
// Here only enable htmlTag detection, we'll detect the language only
// server-side with remix-i18next, by using the `<html lang>` attribute
// we can communicate to the client the language detected server-side
order: ["htmlTag"],
// Because we only use htmlTag, there's no reason to cache the language
// on the browser, so we disable it
caches: [],
},
});
startTransition(() => {
hydrateRoot(
document,
<I18nextProvider i18n={i18next}>
<StrictMode>
<RemixBrowser />
</StrictMode>
</I18nextProvider>
);
});
}
if (window.requestIdleCallback) {
window.requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
window.setTimeout(hydrate, 1);
}
【2024-12-06】Prisma→Drizzleに移行しての感想
使ってみての所感
Good
- DrizzleはEnum使えるのが良い
- Prismaは対応されていないし、今後も対応するつもりなさそうだった
- 結局テキスト型を入れられるようにしてアプリケーションレイヤーでバリデーションしていた
- ref: Support
enumin SQLite (via polyfill) · Issue #2219 · prisma/prisma
- スキーマ変えてマイグレーション適用までのステップが短い
- Prismaみたいに型定義ファイル作成する必要がない
- Prismaは「SQLを考えずに書けるのが良い」と思っていたが、Drizzleを使ってみて「SQLっぽくかけて便利！」になった（後述）
-
db.query.tableNameが便利だが、ちょっとでも複雑なことをしようとするとdb.select({ tableName })の方を使うことになりがちだった（これは良い悪いの問題ではない） - TursoでもDBみるのにDrizzle Studio採用してるので見慣れたページでデバッグできる
- Drizzle Studioのリレーションのカラムがローカルだと最新版だけどTursoは古そう
- まだ実装してないけどdrizzle-zod良さそう
More
- スキーマの定義はPrismaの方が簡潔だった（特にMany-to-Many）
- コードの行数だけでいうとDrizzleにすると倍くらいになった
- Nullableかどうか、ユニークかどうかを見るのがPrismaのモデル定義の方が個人的には見やすい（慣れ？）
- Drizzleのスキーマに
$onUpdate()を書いてもDrizzle studioのDrizzle runnerで挙動が確かめられなさそう？
クエリをPrisma→Drizzleに変換する手順
書き直すの面倒なのでAIに「Prismaのクエリを直接Drizzleに変換してくれ」と頼んでもなかなかうまくいかなかった。
うまくいった方法は以下。
- AIにPrismaのクエリを一旦SQLにしてもらう
- Drizzle StudioのSQL runnerで正しく動くことを確認
- AIにSQLをDrizzle用のコードに変換してもらう
これを繰り返しつつ、公式のコードを見ながらDrizzleの書き方を勉強していった。
SQLをゴリゴリ書いてきた人間でもないので「Prismaを使っているとSQLを考えずに書けること」が利点だと思っていた。よってDrizzleを使うことに若干の抵抗感があった。
しかし、DrizzleはSQLっぽくクエリが書けるためSQLさえ正しくかけてしまえば割とすぐにDrizzleのコードに落とし込めた。
全体を通して
- 業務外の時間にちまちまやっているというのもあるけど、全部で1.5ヶ月もかかってしまった（とてもしんどい）
- 原因発見のためのデバッグ（3週間）
- Cloudflare PagesからCloudflare Workersへの移行（1週間強）
- PrismaからDrizzleへの移行（スキーマ+クエリ）（2週間）
- Cloudflare Workersへの移行時に同じコードだけどエラーがでて動かない、ということが度々起きて辛かった
- 結局「アプリを初めから作って→少しずつコードを移行」を繰り返してデバッグした
- サイズが減って早くなったのがとにかく嬉しい
- 12分の1のサイズになるならやるしかなかった
大変だった〜〜〜〜〜。
めちゃくちゃに面倒だけど大事なことは無視せずに頑張って向き合うのは大事。
原因調査開始してからコードを修正するまでに1ヶ月半かかってしまった。
ついでにCloudflare PagesからCloudflare Workersに移行しました。
このスクラップは4ヶ月前にクローズされました
ログインするとコメントできます