Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PWA does not work with workbox / typescript (maybe a feature request?) #8340

Closed
sluedecke opened this issue Jan 19, 2021 · 10 comments
Closed

Comments

@sluedecke
Copy link

Describe the bug
Want to implement custom-service-worker using workbox recipies.

Codepen/jsFiddle/Codesandbox (required)
Sample repository: https://github.com/sluedecke/quasar-pwa-test

To Reproduce
Steps to reproduce the behavior:

  1. Clone repository above
  2. run yarn install
  3. run quasar build --mode pwa

Expected behavior
Project builds without errors

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):

Operating System - Linux(5.10.7-arch1-1) - linux/x64
NodeJs - 15.6.0
Global packages
NPM - 6.14.11
yarn - 1.22.10
@quasar/cli - 1.1.3

Additional context
This has also been discussed here:

@sluedecke
Copy link
Author

$ quasar build mode --pwa

 Build mode........ spa
 Pkg quasar........ v1.15.0
 Pkg @quasar/app... v2.1.14
 Debugging......... no
 Publishing........ no

 Configured browser support (at least 87.65% of global marketshare):
 · Chrome for Android >= 87
 · Firefox for Android >= 83
 · Android >= 81
 · Chrome >= 77
 · Edge >= 84
 · Firefox >= 75
 · iOS >= 10.3
 · Opera >= 68
 · Safari >= 11

 App · Reading quasar.conf.js
 App · Transpiling JS (Babel active)
 App · Extending SPA Webpack config
 App · Cleaned build artifact: "/SRC/workspace/playground-js/pwa-test/dist/spa"
 App · Generating Webpack entry point
 App · Compiling with Webpack...
Starting type checking service...

 • Compiling:
 └── SPA ████████████████████ 100% done in 12366 ms


 App · ⚠️  22 errors encountered:

/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(14,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(37,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(46,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(89,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(99,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(109,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(119,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(129,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(140,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(149,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(157,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(166,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(174,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(183,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-core/types.d.ts(193,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts(62,21):
TS2304: Cannot find name 'FetchEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts(85,24):
TS2304: Cannot find name 'FetchEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts(86,69):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/Strategy.d.ts(87,104):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/StrategyHandler.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/node_modules/workbox-strategies/StrategyHandler.d.ts(16,12):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/PrecacheController.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/PrecacheController.d.ts(72,20):
TS2304: Cannot find name 'ExtendableEvent'.
/SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/PrecacheController.d.ts
ERROR in /SRC/workspace/playground-js/pwa-test/node_modules/workbox-precaching/PrecacheController.d.ts(83,21):
TS2304: Cannot find name 'ExtendableEvent'.

@razorness
Copy link

Exclude folder src-pwa in your tsconfig.json. AFAIK TS is not supported for service worker anyway.

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

@sluedecke
Copy link
Author

sluedecke commented Jan 20, 2021

I tried that, but unfortunately it gives me another error (see https://forum.quasar-framework.org/topic/7495/pwa-typescript/4#):

 App · ⚠️  8 errors encountered:

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

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

@razorness
Copy link

I hate this error. Get it very in often in Webstorm but not when building for dev or prod.

Try the following:

  • add tsconfig.eslint.json, with this content:
{
	"extends": "./tsconfig.json",
	"include": [
		"src/**/*.js",
		"src/**/*.ts",
		"src/**/*.vue",
		"types/*.ts",
		"types/**/*.ts",
		"*.js"
	]
}
  • in .eslintrc.js, edit this line to point to your tsconfig.eslint.json

@sluedecke
Copy link
Author

@razorness thanks for the hint, I applied it to https://github.com/sluedecke/quasar-pwa-test/commit/2d39572261348d02b630037be142ecaaf6fff364 , but it still is not working:

quasar build --mode pwa

 Build mode........ pwa
 Pkg quasar........ v1.15.0
 Pkg @quasar/app... v2.1.14
 Debugging......... no
 Publishing........ no

 Configured browser support (at least 87.65% of global marketshare):
 · Chrome for Android >= 87
 · Firefox for Android >= 83
 · Android >= 81
 · Chrome >= 77
 · Edge >= 84
 · Firefox >= 75
 · iOS >= 10.3
 · Opera >= 68
 · Safari >= 11

 App · Reading quasar.conf.js
 App · Transpiling JS (Babel active)
 App · [InjectManifest] Using your custom service-worker written file
 App · Extending PWA Webpack config
 App · Cleaned build artifact: "/SRC/pwa-test/dist/pwa"
 App · Generating Webpack entry point
 App · Compiling with Webpack...
Starting type checking service...

 • Compiling:
 └── PWA ████████████████████ 100% done in 11940 ms


 App · ⚠️  8 errors encountered:

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

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

✖ 1 problem (1 error, 0 warnings)

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

/SRC/pwa-test/src-pwa/register-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/register-service-worker.js.
The file must be included in at least one of the projects provided

✖ 1 problem (1 error, 0 warnings)

 @ ./.quasar/client-entry.js 22:0-48
 @ multi ./.quasar/client-entry.js
./src/App.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/SRC/pwa-test/src/App.vue
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: src/App.vue.
The file must be included in at least one of the projects provided

✖ 1 problem (1 error, 0 warnings)

 @ ./.quasar/app.js 16:0-34 36:19-22
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js

...

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

@pdanpdan
Copy link
Collaborator

cross reference:
#8340
#7153

@sluedecke
Copy link
Author

Also related to:
#6333

Probably a duplicate of:
#8102

@rstoenescu
Copy link
Member

PWA with Typescript will be available through @quasar/app v3.0.0-beta.8 -- this is for Quasar v2.

@rstoenescu
Copy link
Member

As time will allow me, I'll backport to Quasar v1 as well.

@dlecan
Copy link

dlecan commented Mar 30, 2021

@rstoenescu

As time will allow me, I'll backport to Quasar v1 as well.

Migration path to Quasar v2 is a bit too heavy for our application now, but using TS in src-pwa would be a great improvement for the quality of our project!

Is it possible to help to backport the feature to Quasar v1?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants