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

[Stew Heckenberg]

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 :)

[Stew Heckenberg]

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

[Joaquín Sánchez]

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

[Mustafa Dalga]

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",
    }
  ],
}

[Gil Nimer]

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

[Joaquín Sánchez]

@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...).

[Gil Nimer]

@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!

[David Fischer]

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 👌