CODEWITHSUNDEEP
typescripttypescript-typingspyodide
Jiefu7
Jiefu7

Reputation: 39

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.

Upvotes: 1

Views: 613

Answers (2)

Jiefu7
Jiefu7

Reputation: 39

Putting this code somewhere solves the problem:

declare global {
  export interface FetchEvent{}
}

Upvotes: -1

Teapot418
Teapot418

Reputation: 11

I think I found your issues. Heres the solution I came up with.

First is,

Error 1: Can't find FetchEvent

The FetchEvent type is defined in lib.webworker.d.ts which is part of the TS lib. The issue arises because the sync-message lib is using FetchEvent in the main thread but the webworker lib is not included in the main thread's compilation.

To fix this issue, you can add the webworker lib to the main threads compilation by modifying your tsconfig.json like this:

{
  "compilerOptions": {
    //... (other options remain the same)
    "lib": [
      "es2016",
      "dom",
      "webworker" // Add this
    ],
    //... (other options remain the same)
  }
}

by including webworker in the main thread;s compilation, TS will be able to find the FetchEvent type.

That brings us to

Error 2: Cannot find HTMLCanvasElement

This error happens because HTMLCanvasElement is defined in lib.dom.d.ts which is not included in the Web Workers compilation by default. Since pyodide is being imported in your Web Worker its trying to use HTMLCanvasElement which is not available in the Web Worker context.

To fix this, you can create a seperate tsconfig.worker.json file for your Web Worker which includes the dom lib:

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

By including dom in the Web Worker's compilation, TS will be able to find the HTMLCanvasElement type.

Additional suggestion

To avoid similar issues in the future consider creating a separate tsconfig.json file for each module or library that has specific dependencies or requirements. This will help you manage the compilation process more effectively and avoid conflicta between different modules.

Lmk if this works!

Upvotes: 1

Related Questions