ローカルのvite-plugin-pwaを、手元のReact Router v7プロジェクトで直接利用する方法

React Router v7でvite-plugin-pwaで使えないという情報をもらった。 確認したところ確かに使えないことが確認できたので、React Router v7で作成したウェブアプリをPWA(インストールに対応のみ)にするに急いで「(インストールに対応のみ)」という文言を追加した。 どうやらインストールのみ対応であれば問題はなさそうだった。 せっかくなのでなぜうまく使いないのか確かめてみようと思い立った。 npmでインストールしても色々試せないので、ローカルに置いたvite-plugin-pwaで試してみることにした。 該当するissueは、こちら。 - Feature Request: Vite PWA Support for React Router 7 #809 pnpmの ワークスペース(workspace) 機能を使うのが最も簡単 ってgeminiが言っていたので、それを手掛かりにする。 そもそもpnpmのワークスペースとは、 > pnpmのワークスペースは、複数のパッケージ（プロジェクト）を単一のリポジトリで管理するための機能です。これは、一般的に「モノレポ（Monorepo）」と呼ばれる開発スタイルを実現するのに役立ちます で、これもgeminiが言っていた。 vite-pwa-pluginは複数のフレームワークに対応しているのが特徴で、そのすべてのプロジェクトpnpmのワークスペースを用い1つのリポジトリで管理しているとのことらしい。 モノレポってフロントとバックエンドを１つのリポジトリで管理するためのものって決めつけていたので、こういう使い方もできるのかと驚いた。 本題に戻しpnpm-workspace.yamlというファイルを見に行くと、 と書かれている。 で、examplesを見に行くと、 とか対応しているプロジェクトがあるのでここに各プロジェクトを作成すればいいっぽい。 プロジェクトを作成してみる ↓新しくgitを初期化するか聞かれるけど、すでにgit管理されたプロジェクトの中にいるのでNoを選択する。 ↓npmを使うか聞かれるけどvite-plugin-pwaはpnpmを使用しているのでNoを選択する。 これでインストールが完了した。 examples以下にプロジェクトが作成されていることを確認できる。 vite-plugin-pwaをインストールし、自分自身を見るように修正する ここでいう自分自身はcloneしたvite-plugin-pwaのこと。 まずは作成したプロジェクトにvite-plugin-pwaをインストールする。 インストールすると最新のvite-plugin-pwaがインストールされるので、自分自身を見るようにする。 ↓ 修正 vite-plugin-pwaのルートディレクトリに戻り で依存関係を修正する。 vite-plugin-pwa": "workspace:*", と指定することで、examples/react-router-v7 プロジェクトは、npmで公開されているバージョンの vite-plugin-pwaをインストールする代わりに、ローカルのルートディレクトリにあるvite-plugin-pwaのソースコードを直接参照するようになる。 ルートディレクトリにあるvite-plugin-pwaのソースコードが参照されているか確認する まずはvite-plugin-pwaを呼び出し、 でreact-router-v7のアプリを起動する。 src\index.ts下記のように修正し、 まずはプラグインのビルドを実行し、 Exampleアプリを起動する。 追記したログが出ていることが確認できたので目的は達成できた。 サーバーが起動しない コンソールが出ているところまでは確認できたけど、開発サーバーが立ち上がらない。 React Router v7で使えないことは聞いているけど、VitePWA()を追加しただけでは落ちないはず。 つまり別の問題が起きているっぽい。 ~~エラーをgeminiに読んでもらうとreact-router-domとreact-routerのバージョンの不整合が原因だったらしい。~~ ~~"react-router": "^7.9.2"では "react-router-dom": "^7.9.2"を使用する必要があるけれど、指定がなかったのでpnpmがワークスペース内の別の場所で使われている古いバージョンが参照されていた。~~ ~~なので、明示的に"react-router-dom": "^7.9.2"を追加し解決できた。~~ ~~svelte-kitのエラーが出ているけど、今回は問題ないので、ひとまずこれでスタートラインに立てた。~~ > ⚠️ vite.config.tsのtsconfigPaths()の引数がなかったことが原因だった。 > > tsconfigPaths({ projects: ['./tsconfig.json'] }で解決した。 あとはいろいろ触ってどこまで使えて、どこで使えなくなるかを試していきたい。