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

[sambhav-gore]

I was following the steps from here - https://vite-pwa-org.netlify.app/frameworks/sveltekit.html

I installed the dependency, added the plugin in the vite.config.js and when I am adding the webmanifest link or the register SW code, I am seeing the problem that it is complaining about not able to find the module virtual:pwa-info.

Based on what I see in the docs, I have tried adding the types in my tsconfig. I also tried adding the references in my app.d.ts file (as shown in this example - https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts/src/app.d.ts#L1 )

But neither have worked for me. VS Code still complains that the module is not found and in the run time It does have any pwaInfo .

My +layout.svelte

<script lang="ts">
	import '../app.postcss';
	import { pwaInfo } from 'virtual:pwa-info';
	import { onMount } from 'svelte';
	
	onMount(async () => {
		if (pwaInfo) {
		         // --->>>> It never get here.
			const { registerSW } = await import('virtual:pwa-register');

			if (registerSW) {
				console.log('registering sw');
			} else {
				console.log('no sw');
			}
			registerSW({
				immediate: true,
				onRegistered(r: any) {
					// uncomment following code if you want check for updates
					// r && setInterval(() => {
					//    console.log('Checking for sw update')
					//    r.update()
					// }, 20000 /* 20s for testing purposes */)
					console.log(`SW Registered: ${r}`);
				},
				onRegisterError(error: any) {
					console.log('SW registration error', error);
				}
			});
		}

		if (!pwaInfo) {
			console.log('no pwa info');  // -->>>> I SEE THIS BEING LOGGED ON BROWSER CONSOLE.
		}
	});

	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
</script>

<svelte:head>
	{@html webManifestLink}
</svelte:head>
<slot />

My vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';

const config: UserConfig = {
	plugins: [sveltekit(), SvelteKitPWA()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
};

export default config;

My app.d.ts :

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
/// <reference types="vite-plugin-pwa/svelte" />
/// <reference types="vite-plugin-pwa/info" />
declare global {
	namespace App {
		// interface Error {}
		interface Locals {
			accessToken?: string;
			user: {
				userId: string;
				email: string;
				roles: string[];
				name: string;
			};
		}
		interface PageData {
			user?: {
				userId: string;
				email: string;
				roles: string[];
				name: string;
			};
		}
		// interface Platform {}
	}
}

export {};

Sveltejs/kit version - 1.7.2
vite-wa/sveltekit version - 0.2.5

What am I doing wrong ? Any help will be appreciated. thanks.

[sambhav-gore]

UPDATE

If I build and preview it I do see the PWA is correctly made and I see correct logs in the browser too but my VS code is still complaining about not able to find the module.

[gschurck]

Same issue on Webstorm, even after following the Accessing PWA info part.

[Naviamold1]

Same issue here, I tried everything specified in the docs: added types to tsconfig.json, added /// <reference types="vite-plugin-pwa/client" /> and / or /// <reference types="vite-plugin-pwa/svelte" />, etc. nothing worked I'm still experiencing the module not found error messages. Though the app works it just can't assign the types. So right now I'm just resorting to // ts-ignore

[Naviamold1]

Also the same errors also pop up in the example project repo

[userquin]

can you try importing the modules (or use the triple slash reference in the corresponding svelte file script)?

// src/app.d.ts
import 'vite-plugin-pwa/info';
import 'vite-plugin-pwa/svelte';

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface Platform {}
	}
}

export {};

[Naviamold1]

Still the same

[userquin]

@Naviamold1

[Naviamold1]

[userquin]

Can you check typescript version? I'm using 5.2.2

EDIT: sorry, you're not using TypeScript

[Naviamold1]

ye im also using 5.2.2

[Naviamold1]

Can you check typescript version? I'm using 5.2.2

EDIT: sorry, you're not using TypeScript

I am

[Naviamold1]

the create svelte@latest for some reason just does <script> instead of <script lang='ts'> in the +layout.svelte even when selecting using typescript option in the installer

[userquin]

I guess SvelteKit should switch to module resolution bundler, can you edit the .sveltekit/tsconfig.json file and replace "moduleResolution": "node" to "moduleResoluton": "bundler" (will be override once dev server restarted)?

[userquin]

@Naviamold1 can your trying adding a new src/vite-env.d.ts file removing the imports/references in src/app.d.ts?

/// <reference types="vite-plugin-pwa/info" />
/// <reference types="vite-plugin-pwa/svelte" />

or (it seems your are using the virtual for VanillaJS)

/// <reference types="vite-plugin-pwa/info" />
/// <reference types="vite-plugin-pwa/vanillajs" />

[Naviamold1]

[userquin]

I'm using Node 18 with these plugins (I use VSCode to test TypeScript only):

[gtm-nayan]

@userquin do you have vite-plugin-pwa declared explicitly in your dependencies in that project?

Aside: I can't test with the example project in this repo because pnpm can't seem to find the package at the root of the monorepo with the workspace protocol

[userquin]

I'm using npm, this is the package.json:

{
	"name": "sveltekit-latest-example",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"run-tsc": "svelte-check --help",
		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
	},
	"devDependencies": {
		"@fontsource/fira-mono": "^4.5.10",
		"@neoconfetti/svelte": "^1.0.0",
		"@sveltejs/adapter-auto": "^2.0.0",
		"@sveltejs/kit": "^1.20.4",
		"@types/cookie": "^0.5.1",
		"@vite-pwa/sveltekit": "^0.2.5",
		"svelte": "^4.2.0",
		"svelte-check": "^3.4.3",
		"typescript": "^5.2.2",
		"unplugin-icons": "^0.16.6",
		"vite": "^4.4.2"
	},
	"type": "module"
}

[gtm-nayan]

Ahh, works for me if I use npm but not with pnpm, probably because of hoisting or whatever it's called.

Also works if I install vite-plugin-pwa directly. Maybe these types could be exposed through a single entrypoint in @vite-pwa/sveltekit?

[Naviamold1]

huh ye with npm its working but not with pnpm

[userquin]

ok, to make it working with pnpm, you need to add 2 entries to .npmrc, auto-install-peers and shamefully-hoist=true:

engine-strict=true
resolution-mode=highest
auto-install-peers=true
shamefully-hoist=true 

EDIT: engine-strict and resolution-mode added by kit, beware, running pnpm install will ask you to remove the node_modules folder

[Naviamold1]

Ok um this solved 3 errors but 1 error still remains

[userquin]

can you try adding the imports in src/app.d.ts and removing the triple slash references from src/vit-env.d.ts?

[userquin]

// src/app.d.ts
import 'vite-plugin-pwa/info';
import 'vite-plugin-pwa/vanillajs'; // <== or import 'vite-plugin-pwa/svelte'; if using the virtual module for svelte 

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface Platform {}
	}
}

export {};

[Naviamold1]

// src/app.d.ts
import 'vite-plugin-pwa/info';
import 'vite-plugin-pwa/vanillajs'; // <== or import 'vite-plugin-pwa/svelte'; if using the virtual module for svelte 

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface Platform {}
	}
}

export {};

YES this worked now all errors are gone.
The 'import vite-plugin-pwa/svelte' didnt work but import 'vite-plugin-pwa/vanillajs' did, even though it's a sveltekit applications.

[userquin]

You're using the virtual module for VanillaJS and so you can use import 'vite-plugin-pwa/vanillajs'; or import 'vite-plugin-pwa/client';, if you use the virtual for Svelte use import 'vite-plugin-pwa/svelte';:

import { registerSW } from 'virtual:pwa-register';`

or

import { useRegisterSW } from 'virtual:pwa-register/svelte';`

PWA plugin is fw agnostic, the virtual for Svelte is just a wrapper around the VanillaJS one, exposing info with the reactivity from the framework, in Svelte using Writable stores:

https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/client/build/svelte.ts