TypeScript error: Cannot redeclare block-scoped variable 'self'

[hornta]

I'm getting a TypeScript error in my service worker file and I can't figure how to solve it.

This is the error I'm getting:

PS C:\project> pnpm lint

> [email protected] lint C:\project
> turbo run lint

• Packages in scope: backend, game, web
• Running lint in 3 packages
• Remote caching disabled
web:lint: cache miss, executing 5eeacbef0868f2c2
web:lint: 
web:lint: > [email protected] lint C:\project
web:lint: > tsc --noEmit && TIMING=1 eslint "src/**/*.ts*"
web:lint: 
web:lint: src/service-worker/sw.ts(3,1): error TS1208: 'sw.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. 
Add an import, export, or an empty 'export {}' statement to make it a module.
web:lint: src/service-worker/sw.ts(3,15): error TS2451: Cannot redeclare block-scoped variable 'self'.
web:lint: src/service-worker/sw.ts(9,9): error TS2339: Property 'waitUntil' does not exist on type 'Event'.
web:lint: src/service-worker/sw.ts(9,49): error TS2339: Property 'notification' does not exist on type 'Event'.
web:lint: src/service-worker/sw.ts(10,9): error TS2339: Property 'notification' does not exist on type 'Event'.
web:lint:  ELIFECYCLE  Command failed with exit code 2.
web:lint: ERROR: command finished with error: command (C:\project\apps\web) pnpm run lint exited (1)
command (C:\project\apps\web) pnpm run lint exited (1)

 Tasks:    0 successful, 1 total
Cached:    0 cached, 1 total
  Time:    3.288s

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.

And this is my service worker file:

/// <reference lib="webworker" />

declare const self: ServiceWorkerGlobalScope;

self.addEventListener("install", () => void self.skipWaiting());
self.addEventListener("activate", () => void self.clients.claim());

self.addEventListener("notificationclick", (event) => {
  event.waitUntil(self.clients.openWindow(event.notification.tag));
  event.notification.close();
});

I saw another project put the sw.ts in its own directory in src/service-worker and then put a tsconfig.json at its side. I tried to do it but it doesn't look like it's working.

This is the tsconfig.json src/service-worker/tsconfig.json

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "types": ["serviceworker"],
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": false,
    "module": "ESNext",
    "moduleResolution": "Node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "useDefineForClassFields": true
  },
  "include": ["./"]
}

Do you see something obvious wrong or should I provide more information?

[userquin]

@hornta check also the build script, you should keep it separate: https://github.com/jeffposnick/yt-playlist-notifier/blob/main/package.json#L41

You should also add a tsconfig.json inside serviceworker folder: one tsc for the project and another for sw.

[hornta]

@hornta check also the build script, you should keep it separate: https://github.com/jeffposnick/yt-playlist-notifier/blob/main/package.json#L41

Separate from what? In that file both tsc and the build script are together in it's same script. The build works if I only run vite build so this problem is just something to do with the typescript compilation.

This is my package.json

{
  "name": "web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "tsc --noEmit && TIMING=1 eslint \"src/**/*.ts*\""
  },
  "dependencies": {
    "@clerk/clerk-js": "^4.22.0",
    "@clerk/clerk-react": "^4.6.4",
    "@tabler/icons": "^1.118.0",
    "@tailwindcss/forms": "^0.5.3",
    "@tanstack/react-query": "^4.20.4",
    "@tanstack/react-router": "0.0.1-beta.38",
    "@trpc/client": "^10.8.1",
    "@trpc/react-query": "^10.8.1",
    "@trpc/server": "^10.8.1",
    "@types/serviceworker": "^0.0.59",
    "autoprefixer": "^10.4.13",
    "bson": "^4.7.0",
    "clsx": "^1.2.1",
    "postcss": "^8.4.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "superjson": "^1.12.1",
    "tailwindcss": "^3.2.4",
    "vite-plugin-pwa": "^0.14.1",
    "web-push": "^3.5.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.1",
    "typescript": "^4.9.4",
    "vite": "^4.0.4"
  }
}

You should also add a tsconfig.json inside serviceworker folder: one tsc for the project and another for sw.

It is separate. I got two tsconfig.json, one in the project root folder and one in the service-worker directory.

My root tsconfig.json. In here I've tried to exclude the service-worker project with out no success.

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noUncheckedIndexedAccess": true
  },
  "include": ["./src"],
  "exclude": ["service-worker"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[hornta]

Hmm.. turns out all I had to do was to add a export default null; to the sw.ts. I found it in a comment here: microsoft/TypeScript#14877 (comment)

I don't know why it works :-)

[hornta]

The above comment caused a weird build error:

web:build: error during build:
web:build: RollupError: "none" was specified for "output.exports", but entry module "src/service-worker/sw.ts" has the following exports: "default"

I had to write export {} instead.