❤️

RemixとVite

2023/11/01に公開

1件

はじめに

この記事は2023/11/1時点の情報です。Viteのサポートは現在 Unstalbe である為今後仕様などが変更される可能性があります。そのため、現時点でViteを本番環境に使うことはお勧めできません。予めその点をご理解の上読んでいただけますと幸いです。

CHANGELOG

2023/11/03

実際に使ってみて起きた問題を追加
移行方法に記事作成時には無かった動画を追加

簡単なまとめ

HMR やHDR が速くなるよ！
Vite の機能やプラグインが使用できる！
2.1. Remix コンパイラに無い機能はVite を排他的に使う場合にだけ使ってね！
2.2. MDXとかがVite のプラグインを使うことで簡単に使えるように！

Viteが使える魅力

Viteを使用することで、追加のバンドル機能にViteのプラグインを使用できる点です。また、MDXなどがViteのプラグインを使用することで簡単に使用することができます。これはブログなどを作成する際にかなり役立ちそうだなと感じています。

最後にやはりViteのHMRなどは非常に優秀で、元から良かった開発者体験がより良くなると思います。実際Remix公式ブログに以下のような検証結果がありましたので、引用します。

So how fast is lightning fast ⚡️? Well, we did some quick testing on the Indie Stack with a M1 Max MacBook Pro and here’s what we found:

10x faster HMR 🔥
5x faster HDR 🔥

HMRが10xになるとのことでかなり期待してます。

※HDRは Hot Data Revalidationのことです

試してみる

最小限の構成は unstable-vite テンプレート

npx create-remix@latest --template remix-run/remix/templates/unstable-vite

サーバーをカスタムする場合は unstable-vite-express テンプレートが使用できます

npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express

移行する

下のドキュメントのセクションが参考になります。

また、動画での移行ガイドもあるのでそちらも参考にしてみるとよいかもしれません。（2023/11/03追記）

気を付けること

Remixコンパイラは元々パスエイリアスなどを tsconfig.json の paths 等から解決してくれますが、Viteを使用する場合は vite-tsconfig-paths 等のライブラリが必要となります。

これに似た問題として、Vite を使うことでRemix そのものについて学ぶことが減る代わりにVite についての知識が必要となります。Vite にはRemix コンパイラには組み込まれていない多くの機能があり、これらの機能を使用するとRemix コンパイラがアプリをコンパイルできなくなってしまいます。今後もVite を排他的に使用する場合のみ使用するようにしてください。

実際に使ってみて起きた問題とその解決策

pnpmのworkspaceを使っている際にエントリファイルが見つからない

pnpmのworkspaceを使っている状態で pnpm dev を使ったところ以下のようなエラーが出ました。

8:52:16 [vite] Internal server error: Cannot resolve asset path "C:\Users\yupix\Desktop\work\demo\node_modules\.pnpm\@remix-run+dev@2.2.0_@remix-run+serve@2.2.0_typescript@5.2.2_vite@4.5.0\node_modules\@remix-run\dev\dist\config\defaults\entry.server.node.tsx" outside of root directory "C:\Users\yupix\Desktop\work\demo\packages\frontend".

どうやら entry.server.tsx などが無いことが問題のようです。一応修正方法としては下記にあるIssueにあった pnpm remix reveal で entry.server.tsx と entry.client.tsx を作成することで解決できます。

.envから `process.env.*`で環境変数を読み取れない

てっきり import.meta.env.* にしないとダメなのかなと思ったりしたのですが、クライアント側コード用の VITE_ prefixを付けた物しか動作しませんでした。

正しい方法としては *.server.ts 等のサーバー用ファイルで dotenv パッケージをimportすることのようです。

デフォルトでは入っていないのでインストールする必要があります。

pnpm add dotenv

単純に環境変数を読み取るだけではなくzodを使ったバリデーションもしていますが、以下のようなコードで今まで通り process.env.* 形式で取得できるようになります。

env.server.ts

import 'dotenv/config'  // 先頭に追加する
import { z } from "zod";

const schema  = z.object({
    NODE_ENV: z.enum(["development", "production", "test"] as const),
})

declare global {
    namespace NodeJS {
        interface ProcessEnv extends z.infer<typeof schema> {}
    }
}

export function init() {
    const parsed = schema.safeParse(process.env);

    if (parsed.success === false) {
        console.error('Invalid environment variables: ', parsed.error.flatten().fieldErrors);
        throw new Error('Invalid environment variables');
    }
}

実際に作ってる最中のプロジェクト

一応Remixで作ってるプロジェクトはいろいろあるんですが、流石にunstableな物に移行する勇気は無いので、個人ブログ作ってみました。詳細についてはまた後日別の記事を書くつもりですが、構成としては Remix(Vite) + Strapi + shadcn/ui(Tailwind CSS)という形です。StrapiはCMSとして使ってます。このプロジェクトは記事で触れたMDXなどの機能は使ってません。~~ほとんどViteの速さ目的です~~。

https://github.com/yupix/yupix.me