Typescript Error: Cannot find name 'FetchEvent'. Did you mean 'TouchEvent'

I integrated Pyodide into a big angular project using different npm packages. Two of those packages are sync-message and pyodide.

Error-Message: Cannot find 'FetchEvent'.

I encounter the following Error using sync-message:

4 export declare function isServiceWorkerRequest(request: FetchEvent | string): boolean;
                                                          ~~~~~~~~~~
  node_modules/typescript/lib/lib.dom.d.ts:13890:13
    13890 declare var TouchEvent: {
                      ~~~~~~~~~~
    'TouchEvent' is declared here.

I put this Error away so that I could continue working on my code by adding a "skipLibCheck": true in the tsconfig.json file of the project.

This is my tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "lib": [
      "es2016",
      "dom",
      "webworker"
    ],
    "mapRoot": "./",
    "module": "es2020",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es2015",
    "strict": false,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

As part of the project, I needed to include a Web Worker, which I equipped with its own tsconfig.worker.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": [
      "node",
    ],
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

Now at the end of my work on the project, I need to address this issue again, removing the "skipLibCheck": true.

It is my understanding, that the 'FetchEvent' is defined in node_modules/typescript/lib/lib.webworker.d.ts . Since the sync-message library is used in the main thread, I did believe that putting the "webworker" lib inside the tsconfig.json would solve it, but the Error still remains.

---

Error-Message: Cannot find 'HTMLCanvasElement'.

On a semi-related note, the pyodide npm package throws a similar error.

Error: node_modules/pyodide/pyodide.d.ts:13:22 - error TS2304: Cannot find name 'HTMLCanvasElement'.

13  setCanvas2D(canvas: HTMLCanvasElement): void;
                        ~~~~~~~~~~~~~~~~~

Since HTMLCanvasElement is defined in the lib.dom.d.ts of typescript, but pyodide is being imported in my webworker. Naturally, HTMLCanvasElement is not recognized in the webworker.

---

Question

Why do these Errors come about and how can they be fixed?

I did look around trying to find a solution on the web somewhere, but without avail. I also asked chatgpt and gemini, which couldn't offer me a solution either.

Putting this code somewhere solves the problem:

declare global {
  export interface FetchEvent{}
}