# How to use local vite-plugin-pwa directly in your React Router v7 project

I received information that React Router v7 cannot be used with vite-plugin-pwa.

When I checked it, I found that it was indeed unusable, so I hurriedly added the phrase “(supports installation only)” to Convert a web application created with React Router v7 to PWA (supports installation only).

Apparently, there would be no problem if only the installation was supported.

I decided to take this opportunity to find out why it doesn’t work properly.

I couldn’t try out various things even if I installed with npm, so I decided to try it with vite-plugin-pwa installed locally.

Click here for the applicable issue.

• Feature Request: Vite PWA Support for React Router 7 #809

The easiest way is to use pnpm’s workspace feature.

That’s what gemini said, so I’ll take that as a clue.

First of all, what is the pnpm workspace?

pnpm’s workspace is a feature for managing multiple packages (projects) in a single repository. This helps achieve a development style commonly referred to as “monorepo”

And this is also what gemini said.

vite-pwa-plugin is characterized by its support for multiple frameworks, and it seems that all of its projects are managed in one repository using the pnpm workspace.

I had assumed that a monorepo was for managing the front and back ends in one repository, so I was surprised that it could be used like this.

Returning to the main topic, when I go to look at the file called pnpm-workspace.yaml,

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

It is written.

So, when I went to look at examples,

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

There are projects that support this, so it seems like you can create each project here.

Try creating a project

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

↓You will be asked if you want to initialize a new git, but since you are already in a project managed by git, select No.

Initialize a new git repository?
         No

↓You will be asked if you want to use npm, but vite-plugin-pwa uses pnpm, so select No.

Install dependencies with npm?
         No

The installation is now complete.

You can confirm that the project has been created under examples.

examples\react-router-v7

Install vite-plugin-pwa and modify to see yourself

Here, I am referring to vite-plugin-pwa which was clone.

First, install vite-plugin-pwa into the created project.

pnpm add vite-plugin-pwa -D

When you install it, it will install the latest vite-plugin-pwa, so make sure to watch it yourself.

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

↓ Correction

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

Return to the root directory of vite-plugin-pwa

pnpm install

Fix the dependencies with.

By specifying vite-plugin-pwa": "workspace:*",, examples/react-router-v7 The project is based on the version published under npm Instead of installing vite-plugin-pwa, you will now directly reference the vite-plugin-pwa source code in your local root directory.

Check if the source code of vite-plugin-pwa in the root directory is referenced

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

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

First, call vite-plugin-pwa,

pnpm --filter react-router-v7 dev

Start the react-router-v7 application.

src\index.ts Modify as below,

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

First, run the plugin build,

pnpm build

Launch the Example app.

 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 読み込まれていますか?!

I was able to confirm that the added logs were appearing, so I achieved my goal.

server doesn’t start

I was able to confirm that the console was displayed, but the development server did not start up.

I’ve heard that it can’t be used with React Router v7, but just adding VitePWA() shouldn’t cause the problem.

So it seems like another problem is occurring.

~~When I asked gemini to read the error, it seems that the cause was an inconsistency between the versions of react-router-dom and react-router. ~~

~~"react-router": "^7.9.2" requires the use of "react-router-dom": "^7.9.2", but since it was not specified, an older version was being referenced where pnpm was used elsewhere in the workspace. ~~

~~So I was able to solve the problem by explicitly adding "react-router-dom": "^7.9.2". ~~

There was an error ~~svelte-kit, but there was no problem this time, so I was able to get to the starting line with this. ~~

⚠️ The cause was that there was no argument for tsconfigPaths() of vite.config.ts.

Solved with tsconfigPaths({ projects: ['./tsconfig.json'] }.

I want to try out various things and see where it can be used and where it can’t be used.