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

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.