PWA + Typescript

MartinB

Hello,

I’m fairly new to frontend and JS framworks in general, excuse me if this should be obvious.

I’ve been working with Quasar only in the context of SPAs until now and that works just fine, loving it. I always use TypeScript wherever possible and with SPAs this gives me no headaches.

Now I wanted to create my first PWA and in development mode that also works great.
But whenever I want to build, I get following errors:

/home/user/pwa/node_modules/workbox-core/types.d.ts
ERROR in /home/user/pwa/node_modules/workbox-core/types.d.ts(8,13):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-core/types.d.ts
ERROR in /home/user/pwa/node_modules/workbox-core/types.d.ts(30,13):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-core/types.d.ts
ERROR in /home/user/pwa/node_modules/workbox-core/types.d.ts(81,13):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-core/types.d.ts
ERROR in /home/user/pwa/node_modules/workbox-core/types.d.ts(91,13):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-core/types.d.ts
ERROR in /home/user/pwa/node_modules/workbox-core/types.d.ts(100,13):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-precaching/PrecacheController.d.ts
ERROR in /home/user/pwa/node_modules/workbox-precaching/PrecacheController.d.ts(42,17):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-precaching/PrecacheController.d.ts
ERROR in /home/user/pwa/node_modules/workbox-precaching/PrecacheController.d.ts(81,17):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-routing/Router.d.ts
ERROR in /home/user/pwa/node_modules/workbox-routing/Router.d.ts(79,17):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-routing/Router.d.ts
ERROR in /home/user/pwa/node_modules/workbox-routing/Router.d.ts(97,17):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-strategies/CacheFirst.d.ts
ERROR in /home/user/pwa/node_modules/workbox-strategies/CacheFirst.d.ts(60,47):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-strategies/NetworkFirst.d.ts
ERROR in /home/user/pwa/node_modules/workbox-strategies/NetworkFirst.d.ts(85,17):
TS2304: Cannot find name 'ExtendableEvent'.
/home/user/pwa/node_modules/workbox-strategies/StaleWhileRevalidate.d.ts
ERROR in /home/user/pwa/node_modules/workbox-strategies/StaleWhileRevalidate.d.ts(68,17):
TS2304: Cannot find name 'ExtendableEvent'.

 App · ⚠️  [FAIL] Build failed with 12 errors. Check log above.

I tried to configure my project as suggested in this stackoverflow answer but did not succeed to get it to a working state. Also, this is not using the src-pwa directory at all which might also have thrown me off while trying to replicate it properly.

Anybody willing to share their working tsconfig setup in a PWA + Typescript scenario?

Thank you.

razorness

Afaik quasar supports only Javascript for service workers.

To get rid of this error, you can add this to your tsconfig.json:

{
	"extends": "@quasar/app/tsconfig-preset.json",
	"compilerOptions": {
		// ...
	},
	"exclude": [
		"src-pwa"
	]
}

saschal

Unfortunately this does not work for me. I would love to use workbox stuff like:

custom-service-worker.js:

/*
 * This file (which will be your service worker)
 * is picked up by the build system ONLY if
 * quasar.conf > pwa > workboxPluginMode is set to "InjectManifest"
 */

// Use with precache injection
import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

But quasar build --mode pwa results in the same errors as seen in the OP. Trying to exclude src-pwa leads to:

 App · ⚠️  8 errors encountered:

./src-pwa/custom-service-worker.js
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/home/saschal/Projekte/workspace/playground-js/pwa-test/src-pwa/custom-service-worker.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src-pwa/custom-service-worker.js.
The file must be included in at least one of the projects provided
...

saschal

Maybe this helps: https://github.com/quasarframework/quasar/issues/7153

saschal

Created this issue: https://github.com/quasarframework/quasar/issues/8340
this github repo to reproduce: https://github.com/sluedecke/quasar-pwa-test

No More Posting New Topics!

PWA + Typescript