[Bug - next-pwa]: Example code gives an type error

FleetAdmiralJakob commented 10 months ago

Provide environment information

next: 14.0.4, "@ducanh2912/next-pwa": "^10.0.0",

Link to reproduction - Issues with a link to complete (but minimal) reproduction code help us address them faster

https://codesandbox.io/p/devbox/github/DuCanhGH/next-pwa/blob/master/examples/lifecycle

To reproduce

try to use window.workbox

Describe the bug

There is no property workbox on window. TS2339: Property workbox does not exist on type Window & typeof globalThis

Expected behavior

No type error

Screenshots (if relevant)

No response

Additional information (if relevant)

No response

DuCanhGH commented 10 months ago

I wouldn't trust CodeSandbox's IDE to be honest. It couldn't even resolve react or next... This example works fine in VSCode though.

FleetAdmiralJakob commented 10 months ago

IntelliJ gives the same error

DuCanhGH commented 10 months ago

@FleetAdmiralJakob I don't own IntelliJ, so I can't really help you with that. I think how we are doing it is correct. One thing I'd like to check with you though, would adding "type": "module" to your package.json fix it?

FleetAdmiralJakob commented 10 months ago

"type": "module" helps not.

"type": "module" breaks the next config

Errors still there.

FleetAdmiralJakob commented 10 months ago

It also breaks dozen of eslint rules. But I think I can disable them with a dozen of the ugly eslint disable rules but the typescript errors remain.

FleetAdmiralJakob commented 10 months ago

And you can't build it. It just runs in the dev version.

DuCanhGH commented 10 months ago

@FleetAdmiralJakob That's really weird. This is straight up a "It works on my machine ™️" moment I have to tell you that... Wondering what could cause this. I will investigate tomorrow!

DuCanhGH commented 10 months ago

@FleetAdmiralJakob still unable to reproduce the error... I'd like to know your package.json and tsconfig.json if that's possible :)

FleetAdmiralJakob commented 10 months ago

package.json

``` { "name": "weather-app", "version": "1.0.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start", "preinstall": "npx only-allow pnpm" }, "dependencies": { "@ducanh2912/next-pwa": "^10.0.0", "@hookform/resolvers": "^3.3.2", "@legendapp/state": "^2.1.4", "@next/bundle-analyzer": "^14.0.4", "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@react-email/components": "^0.0.12", "@react-email/html": "^0.0.7", "@tanstack/react-query-devtools": "^5.14.5", "@total-typescript/ts-reset": "^0.5.1", "@trpc/client": "^10.44.1", "@trpc/next": "^10.44.1", "@trpc/server": "^10.44.1", "@types/eslint": "^8.56.0", "@types/leaflet": "^1.9.8", "@types/node": "^20.10.5", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", "@types/react-html-parser": "^2.0.6", "@typescript-eslint/eslint-plugin": "^6.15.0", "@typescript-eslint/parser": "^6.15.0", "@upstash/ratelimit": "^1.0.0", "@upstash/redis": "^1.22.1", "@vercel/analytics": "^1.1.1", "@vercel/speed-insights": "^1.0.2", "autoprefixer": "^10.4.16", "axios": "^1.6.2", "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", "clsx": "^2.0.0", "dayjs": "^1.11.10", "eslint": "^8.56.0", "eslint-config-next": "^14.0.4", "fuse.js": "^7.0.0", "leaflet": "^1.9.4", "leaflet-defaulticon-compatibility": "^0.1.2", "lucide-react": "^0.300.0", "next": "^14.0.4", "next-axiom": "^1.1.1", "next-i18next": "^15.1.1", "postcss": "^8.4.32", "prettier": "^3.1.1", "prettier-plugin-tailwindcss": "^0.5.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.49.2", "react-html-parser": "^2.0.2", "react-icons": "^4.12.0", "react-leaflet": "^4.2.1", "react-toastify": "^9.1.3", "resend": "^2.0.0", "sharp": "^0.33.1", "superjson": "^2.2.1", "tailwind-merge": "^2.2.0", "tailwindcss": "^3.4.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5.3.3", "zod": "^3.22.4" }, "ct3aMetadata": { "initVersion": "7.8.0" } } ```

tsconfig.json

``` { "compilerOptions": { "target": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "checkJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "noUncheckedIndexedAccess": true, "baseUrl": ".", "paths": { "~/*": ["./src/*"] } }, "include": [ ".eslintrc.cjs", "next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", ".next/types/**/*.ts", ], "exclude": ["node_modules"] } ```

DuCanhGH commented 10 months ago

@FleetAdmiralJakob you don't have "@ducanh2912/next-pwa/workbox", which declares window.workbox, in your tsconfig.json's "compilerOptions.types". Try adding that to see if it helps.

FleetAdmiralJakob commented 10 months ago

Yes, this solves the problem with the TS Error but I still have one ESLint error:

ESLint: Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the void operator.(@typescript-eslint/no-floating-promises)

DuCanhGH commented 10 months ago

@FleetAdmiralJakob the error message states itself clearly. That function returns a Promise, and the lint rule wants it voided or handled properly. The fastest, most concise way of fixing it is to add the void operator before the function call.

DuCanhGH / next-pwa