You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using Angular and building an application including Pyodide with ng serve, the following Error occurs:
Error: node_modules/pyodide/pyodide.d.ts:13:22 - error TS2304: Cannot find name 'HTMLCanvasElement'.
13 setCanvas2D(canvas: HTMLCanvasElement): void;
~~~~~~~~~~~~~~~~~
Error: node_modules/pyodide/pyodide.d.ts:14:17 - error TS2304: Cannot find name 'HTMLCanvasElement'.
14 getCanvas2D(): HTMLCanvasElement | undefined;
~~~~~~~~~~~~~~~~~
Error: node_modules/pyodide/pyodide.d.ts:15:22 - error TS2304: Cannot find name 'HTMLCanvasElement'.
15 setCanvas3D(canvas: HTMLCanvasElement): void;
~~~~~~~~~~~~~~~~~
Error: node_modules/pyodide/pyodide.d.ts:16:17 - error TS2304: Cannot find name 'HTMLCanvasElement'.
16 getCanvas3D(): HTMLCanvasElement | undefined;
~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
脳 Failed to compile.
The problem seems to be the non-compatibility of the types "webworker" and "dom". This issue is being discussed in microsoft/TypeScript#20595.
It is suggested that Pyodide should run in a web worker. Web workers use the "webworker" types, therefore cannot relate to the type "HTMLCanvasElement".
And the types "webworker" and "dom" are mutually exclusive, as they contain overlapping code.
To Reproduce
Install pyodide in Angular project using 'npm install pyodide'.
pyodide.worker.ts File:
import { loadPyodide} from 'pyodide';
const pyodide = await loadPyodide();
main.ts File:
let pyodideWorker = new Worker(new URL('./pyodide.worker.ts', import.meta.url), { type: 'module' });
Four solutions are proposed through the discussion of the issues (link provided above):
A) using skipLibCheck: true in the tsconfig.json
B) as module owners, provide two different modules, one compiled for dom, one compiled for webworker
C) a new type from typescript, combining both dom and webworker as best as possible
D) users somehow writing new d.ts files to account for missing types (like HTMLCanvasElement)
A is not really a solution though because you usually do want your libraries to me checked.
B is something that you guys could consider doing.
C would be a solution that typescript maintainers could envision.
D is very unclear, at least to me because I'm not sure how to write types for incompatible code in npm packages. Somehow, when checking code, the installed packages in node_modules would have to consider those types.
Another proposed solution by me is to remove the HTMLCanvasElement from the pyodide.d.ts file, as it seems to be the only type that is in the "dom", but not in the "webworker" typings of typescript.
The text was updated successfully, but these errors were encountered:
馃悰 Bug
When using Angular and building an application including Pyodide with ng serve, the following Error occurs:
The problem seems to be the non-compatibility of the types "webworker" and "dom". This issue is being discussed in microsoft/TypeScript#20595.
It is suggested that Pyodide should run in a web worker. Web workers use the "webworker" types, therefore cannot relate to the type "HTMLCanvasElement".
And the types "webworker" and "dom" are mutually exclusive, as they contain overlapping code.
To Reproduce
Install pyodide in Angular project using 'npm install pyodide'.
pyodide.worker.ts File:
main.ts File:
tsconfig.json File;
tsconfig.worker.json File:
Expected behavior
This error should not be a thing.
Environment
Additional context
Four solutions are proposed through the discussion of the issues (link provided above):
A) using
skipLibCheck: true
in the tsconfig.jsonB) as module owners, provide two different modules, one compiled for dom, one compiled for webworker
C) a new type from typescript, combining both dom and webworker as best as possible
D) users somehow writing new d.ts files to account for missing types (like HTMLCanvasElement)
A is not really a solution though because you usually do want your libraries to me checked.
B is something that you guys could consider doing.
C would be a solution that typescript maintainers could envision.
D is very unclear, at least to me because I'm not sure how to write types for incompatible code in npm packages. Somehow, when checking code, the installed packages in node_modules would have to consider those types.
Another proposed solution by me is to remove the HTMLCanvasElement from the pyodide.d.ts file, as it seems to be the only type that is in the "dom", but not in the "webworker" typings of typescript.
The text was updated successfully, but these errors were encountered: