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]