Future Flags
以下のフューチャーフラッグは安定していて、採用する準備ができています。フューチャーフラッグの詳細については、開発戦略 を参照してください。
最新の v2.x への更新
最初に、最新のフューチャーフラッグを持つ最新の v2.x のマイナーバージョンに更新します。
👉 最新の v2 に更新
Vite Plugin
背景
Remix は、独自のクローズドコンパイラ(現在は「クラシックコンパイラ」と呼ばれています)を使用しなくなり、代わりに Vite を使用するようになりました。Vite は、JavaScript プロジェクトのための強力で、高性能で、拡張可能な開発環境です。Vite ドキュメント を参照すると、パフォーマンス、トラブルシューティングなどに関する詳細情報が得られます。
これはフューチャーフラッグではありませんが、新しい機能と一部のフューチャーフラッグは Vite プラグインでのみ使用でき、クラシックコンパイラは Remix の次のバージョンで削除されます。
👉 Vite をインストールする
コードを更新する
👉 ルートの Remix アプリで remix.config.js
を vite.config.ts
に置き換える
サポートされている Remix 設定オプション のサブセットは、プラグインに直接渡される必要があります。
👉 <LiveReload/>
を削除し、<Scripts />
を保持する
👉 tsconfig.json
を更新する
tsconfig.json
の types
フィールドを更新し、skipLibCheck
、module
、moduleResolution
がすべて正しく設定されていることを確認します。
👉 remix.env.d.ts
を更新/削除する
remix.env.d.ts
で次の型宣言を削除します。
remix.env.d.ts
が空になったら、削除します。
パスエイリアスを設定する
Vite はデフォルトでパスエイリアスを提供しません。~
を app
ディレクトリのエイリアスとして定義するなど、この機能に依存していた場合は、vite-tsconfig-paths プラグインをインストールして、Remix コンパイラの動作に合わせて、Vite で tsconfig.json
からパスエイリアスを自動的に解決することができます。
👉 vite-tsconfig-paths
をインストールする
👉 Vite 設定に vite-tsconfig-paths
を追加する
@remix-run/css-bundle
を削除する
Vite は、CSS サイドエフェクトインポート、PostCSS、CSS モジュールなど、他の CSS バンドル機能に対する組み込みのサポートを提供しています。Remix Vite プラグインは、バンドルされた CSS を関連するルートに自動的にアタッチします。
@remix-run/css-bundle
cssBundleHref
エクスポートは常に undefined
になります。
👉 @remix-run/css-bundle
をアンインストールする
👉 cssBundleHref
への参照を削除する
links
で参照されている CSS インポートを修正する
links
関数で CSS を参照している場合、対応する CSS インポートを、Vite の明示的な ?url
インポート構文 を使用して更新する必要があります。
👉 links
で使用されている CSS インポートに ?url
を追加する
Tailwind CSS または Vanilla Extract の移行
Tailwind CSS または Vanilla Extract を使用している場合は、完全な移行ガイド を参照してください。
Remix App Server からの移行
👉 dev
、build
、start
スクリプトを更新する
👉 Vite 設定でグローバルな Node ポリフィルをインストールする
👉 Vite 開発サーバーのポートを設定する(オプション)
カスタムサーバーの移行
カスタムサーバーまたは Cloudflare Functions を移行している場合は、完全な移行ガイド を参照してください。
MDX ルートの移行
MDX を使用している場合は、公式の MDX Rollup プラグイン を使用する必要があります。手順ごとのチュートリアルについては、完全な移行ガイド を参照してください。
v3_fetcherPersist
背景
フェッチャーのライフサイクルは、所有者コンポーネントがアンマウントされるのではなく、アイドル状態に戻るタイミングに基づくようになりました。詳細については、RFC を参照してください。
👉 フラッグを有効にする
コードを更新する
アプリへの影響はほとんどない可能性があります。useFetchers
の使用状況を確認したい場合があります。これは、以前よりも長く持続する可能性があります。何をしているかによって、以前よりも長い時間レンダリングされる可能性があります。
v3_relativeSplatPath
背景
dashboard/*
(*
だけではなく)のような複数セグメントのスプラットパスの相対パスの一致とリンクを変更します。詳細については、CHANGELOG を参照してください。
👉 フラッグを有効にする
コードを更新する
dashboard.$.tsx
や route("dashboard/*")
のように、パスとスプラットを含むルートがあり、その下に <Link to="relative">
や <Link to="../relative">
のような相対リンクがある場合は、コードを更新する必要があります。
👉 ルートを 2 つに分割する
スプラットルートがある場合は、レイアウトルートとスプラットを含む子ルートに分割します。
👉 相対リンクを更新する
そのルートツリー内の相対リンクを持つ <Link>
要素をすべて更新して、同じ場所に引き続きリンクするように、追加の ..
相対セグメントを含めます。
v3_throwAbortReason
背景
ローダーが完了する前にユーザーがページから移動するなど、サーバー側の要求が中止された場合、Remix は new Error("query() call aborted...")
などのエラーではなく、request.signal.reason
をスローします。
👉 フラッグを有効にする
コードを更新する
以前のエラーメッセージを一致させて他のエラーと区別するために、handleError
内にカスタムロジックがあった場合を除き、コードを調整する必要はない可能性があります。
unstable_singleFetch
Single Fetch 動作をオプトインします(フラッグが安定したら、詳細は説明されます)。
unstable_lazyRouteDiscovery
Lazy Route Discovery 動作をオプトインします(フラッグが安定したら、詳細は説明されます)。
unstable_optimizeDeps
開発中に自動的な 依存関係の最適化 をオプトインします。