Cannot find module 'virtual:pwa-register' or its corresponding type declarations.

[Youdaman]

Following the instructions here: https://vite-plugin-pwa.netlify.app/guide/auto-update.html#runtime

$ pnpm build

> vite-project@0.0.0 build C:\Users\Youdaman\Desktop\vite-project
> vue-tsc --noEmit && vite build

src/main.ts:3:28 - error TS2307: Cannot find module 'virtual:pwa-register' or its corresponding type declarations.

3 import { registerSW } from 'virtual:pwa-register'
                             ~~~~~~~~~~~~~~~~~~~~~~

Repro: start fresh Vite Vue TypeScript app, install the Vite PWA plugin, and use the following vite.config.ts and main.ts

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate'
    })
  ]    
})

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onOfflineReady() {
    console.log('offline ready')
  },
})

createApp(App).mount('#app')

I read similar issues like #40 and #227 and came up with the following "fix"...

Update tsconfig.json include node_modules/vite-plugin-pwa/client.d.ts:

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "node_modules/vite-plugin-pwa/client.d.ts"],

Trying to build now complains about workbox-window missing, so then install workbox-window:

pnpm i -D workbox-window

After that build succeeds and I can see the service worker is registered in the Application tab of Chrome dev tools.

But it would be nice if things worked out of the box as per the instructions :)

[Youdaman]

I notice that with Vitesse the tsconfig.json does not have an explicit include but instead just uses exclude https://github.com/antfu/vitesse/blob/main/tsconfig.json and it does not have any issues with import of virtual:pwa-register https://github.com/antfu/vitesse/blob/main/src/modules/pwa.ts

[userquin]

https://vite-plugin-pwa.netlify.app/guide/faq.html

[mustafadalga]

I created a reference file but it was still not working . Then I defined this reference file in tsconfig.json. It worked.

global.d.ts
/// <reference types="vite-plugin-pwa/client" />

tsconfig.json

{
  "include": ["env.d.ts","global.d.ts", "src/**/*", "src/**/*.vue"],
  "files": [],
  "references": [
    {
      "path": "./tsconfig.config.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json",
    }
  ],
}

[rogi29]

For the integration with Astro this worked for me:

{
  "compilerOptions": {
    "types": [
      "vite-plugin-pwa/info.d.ts",
      "vite-plugin-pwa/client.d.ts"
    ]
  }
}

• info.d.ts for importing from virtual:pwa-info
• client.d.ts for importing from virtual:pwa-register

[userquin]

@rogi29 you have also vite-plugin-pwa/vanillajs.d.ts to access virtual:pwa-register, client dts is importing all fw modules (vue, react, preact, svelte...).

[rogi29]

@rogi29 you have also vite-plugin-pwa/vanillajs.d.ts to access virtual:pwa-register, client dts is importing all fw modules (vue, react, preact, svelte...).

That's even better, thanks!

[theUpsider]

For anyone new: Vite generates a file called vite-env.d.ts. Here you can add /// <reference types="vite-plugin-pwa/client" />

[Britnell]

Hey,
I had the same issues. I'm not sure whats going on but if it helps someone :

A

Unlike the above using
{ "compilerOptions": { "types": [ ...
didn't work for me.

it only worked for me when adding them to

{
  "include": [
    "vite-plugin-pwa/vanillajs",
    "vite-plugin-pwa/info",
  ]

B

or as per @mustafadalga adding them to :

env.d.ts
/// <reference types="astro/client" />
/// <reference types="vite-plugin-pwa/info" />
/// <reference types="vite-plugin-pwa/vanillajs" />

with
"include": ["env.d.ts"]

now build is working again 👌

[mahyarmirrashed]

None of these are working for me in Svelte 4.

[userquin]

@mahyarmirrashed what virtual pwa module are you using? if you're using virtual:pwa-register/svelte you need to register vite-plugin-pwa/svelte instead vite-plugin-pwa/vanillajs