typescripttypescript-typingspyodide

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.


Solution

  • Putting this code somewhere solves the problem:

    declare global {
      export interface FetchEvent{}
    }