Cannot find module 'virtual:pwa-info' or its corresponding type declarations about sveltekit HOT 26 OPEN

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

from sveltekit.

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 {};

from sveltekit.

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.

from sveltekit.

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

from sveltekit.

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

from sveltekit.

Still the same

from sveltekit.

@Naviamold1

from sveltekit.

from sveltekit.

Can you check typescript version? I'm using 5.2.2

EDIT: sorry, you're not using TypeScript

from sveltekit.

ye im also using 5.2.2

from sveltekit.

Can you check typescript version? I'm using 5.2.2

EDIT: sorry, you're not using TypeScript

I am

from sveltekit.

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

from sveltekit.

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

from sveltekit.

@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" />

from sveltekit.

from sveltekit.

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

from sveltekit.

@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

from sveltekit.

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

from sveltekit.

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?

from sveltekit.

huh ye with npm its working but not with pnpm

from sveltekit.

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

from sveltekit.

Ok um this solved 3 errors but 1 error still remains

from sveltekit.

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

from sveltekit.

// 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 {};

from sveltekit.

// 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.

from sveltekit.

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

from sveltekit.