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というファイルを見に行くと、

packages:
  - docs/
  - examples/*
onlyBuiltDependencies:
  - sharp

と書かれている。

で、examplesを見に行くと、

examples\vue-router
examples\react-router
examples\solid-router

とか対応しているプロジェクトがあるのでここに各プロジェクトを作成すればいいっぽい。

プロジェクトを作成してみる

npx create-react-router@latest react-router-v7

↓新しくgitを初期化するか聞かれるけど、すでにgit管理されたプロジェクトの中にいるのでNoを選択する。

Initialize a new git repository?
         No

↓npmを使うか聞かれるけどvite-plugin-pwaはpnpmを使用しているのでNoを選択する。

Install dependencies with npm?
         No

これでインストールが完了した。

examples以下にプロジェクトが作成されていることを確認できる。

examples\react-router-v7

vite-plugin-pwaをインストールし、自分自身を見るように修正する

ここでいう自分自身はcloneしたvite-plugin-pwaのこと。

まずは作成したプロジェクトにvite-plugin-pwaをインストールする。

pnpm add vite-plugin-pwa -D

インストールすると最新のvite-plugin-pwaがインストールされるので、自分自身を見るようにする。

  "devDependencies": {
    "vite-plugin-pwa": "^1.1.0",
  }

↓ 修正

  "devDependencies": {
    "vite-plugin-pwa": "workspace:*",
  }

vite-plugin-pwaのルートディレクトリに戻り

pnpm install

で依存関係を修正する。

vite-plugin-pwa": "workspace:*", と指定することで、examples/react-router-v7 プロジェクトは、npmで公開されているバージョンの vite-plugin-pwaをインストールする代わりに、ローカルのルートディレクトリにあるvite-plugin-pwaのソースコードを直接参照するようになる。

ルートディレクトリにあるvite-plugin-pwaのソースコードが参照されているか確認する

import { VitePWA } from "../../src";

export default defineConfig({
  plugins: [
    tailwindcss(),
    reactRouter(),
    tsconfigPaths(),
    VitePWA({
      registerType: "autoUpdate",
    }),
  ],
});

まずはvite-plugin-pwaを呼び出し、

pnpm --filter react-router-v7 dev

でreact-router-v7のアプリを起動する。

src\index.ts下記のように修正し、

export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
  // eslint-disable-next-line no-console
  console.log('LOCAL vite-plugin-pwa 読み込まれていますか?!');

まずはプラグインのビルドを実行し、

pnpm build

Exampleアプリを起動する。

 pnpm --filter react-router-v7 dev

> react-router-v7@ dev C:\Users\username\dev\vite-plugin-pwa\examples\react-router-v7
> react-router dev

LOCAL vite-plugin-pwa 読み込まれていますか?!

追記したログが出ていることが確認できたので目的は達成できた。

サーバーが起動しない

コンソールが出ているところまでは確認できたけど、開発サーバーが立ち上がらない。

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'] }で解決した。

あとはいろいろ触ってどこまで使えて、どこで使えなくなるかを試していきたい。