Comments (26)
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.
from sveltekit.
from sveltekit.
from sveltekit.
Can you check typescript version? I'm using 5.2.2
EDIT: sorry, you're not using TypeScript
from sveltekit.
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.
Related Issues (20)
- Having an issue with ssr = false HOT 8
- Issues with SPA HOT 1
- Inject Register script or inline has no effect on output HTML. HOT 6
- [Info] Cloudflare Adapter Routes misses vite-pwa HOT 1
- Importing 'virtual:pwa-register' causes bug on build HOT 3
- Make client Javascript work offline HOT 2
- Deprecated packages HOT 2
- Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}] HOT 13
- Navigating to SvelteKit error page after a new build causes infinite page reload loop HOT 6
- InjectManifest `The 'swSrc' file can't be read. ENOENT: no such file or directory` error on Gitlab CI HOT 5
- Uncaught ReferenceError: process is not defined for injectManifest HOT 1
- Error: [InjectManifest] 'plugins' property is not expected to be here. HOT 1
- Support Node v20 HOT 1
- Uncaught SyntaxError: Unexpected token 'export' HOT 3
- `_app/version.json` should be included in sw precache manifest
- Please document that images that are outside of `/static` will NOT build in production HOT 2
- Workbox responses with cached data for network only requests HOT 20
- One of the glob patterns doesn't match any files HOT 6
- Please provide a minimal example
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sveltekit.