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