# I tried to find out why react router v7 cannot be converted to pwa using the vite pwa plugin.

• Convert a web application created with React Router v7 to PWA (supports installation only)
• How to use local vite-plugin-pwa directly in your React Router v7 project

In the past, I have said that react router v7 cannot be converted to pwa with vite-pwa-plugin.

The actual issue is Feature Request: Vite PWA Support for React Router 7 #809←here.

Symptom of the problem

The first thing that happens is

• Although manifest has been created,
• Script is not inserted into index.html

It’s not that you can’t use the functions of pwa, but if you try to use vite-pwa-plugin as is, it won’t even become pwa.

Since manifest has been generated, change it to root.tsx

 { rel: "manifest", href: "/manifest.webmanifest" }

You can convert it to pwa by adding CODE_0, but this is not the way to use vite-pwa-plugin.

How to actually run and debug the code is here

Investigation of the cause

First, I tried to understand why manifest was not loaded by index.html by actually reading the code.

export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
  const ctx = createContext(userOptions);
  const api = createAPI(ctx);
  return [
    MainPlugin(ctx, api),
    InfoPlugin(ctx, api),
    BuildPlugin(ctx),
    DevPlugin(ctx),
    AssetsPlugin(ctx),
  ];
}

This is a group of functions that make up vite-pw-plugin.

When I read the code, I found that in the development environment, script was inserted in DevPlugin(ctx),.

• transformIndexHtmlHandler is called within transformIndexHtml
• html = injectServiceWorker(html, options, true) in transformIndexHtmlHandler is executed.
• How manifest is registered in head

That means it’s not firing.

Related issues

So, after doing some research,

Vite plugin transformIndexHtml does not work #12736

I found this issue.

The transformIndexHtml is never called. This means a whole set of vite plugins will not work without any error message.

I understand there’s a good reason why this vite plugin method cannot work with RR, but it should at least throw an error or warning to let the user know the plugin they installed will not work at all.

On the other hand,

This is related to #12352, since our plugin is overriding that subsequent plugin and doesn’t allow for options to be able to inject your own plugin functionality into it.

The reply is as follows.

Translated,

私たちのプラグインが、後続のプラグインを上書きしているため、オプションを利用して独自のプラグイン機能を注入することを許可していません。

It will be like this.

conclusion

In other words, I feel like there’s nothing I can do.

It may be a matter of react-router rather than waiting for vite-pwa-plugin to be fixed.