Error building `mlc-llm`: `Type 'CanvasRenderingContext2D' is missing the following properties from type 'GPUCanvasContext': __brand, configure, unconfigure, getPreferredFormat, getCurrentTexture`

[jparismorgan]

Issue

Hi there, I'm trying to run simple-chat and make changes to web-llm locally while running it. I'm following these instructions to build from source but getting:

[!] (plugin rpt2) Error: src/chat_module.ts:1:24 - error TS2307: Cannot find module 'tvmjs' or its corresponding type declarations.

1 import * as tvmjs from "tvmjs";

To reproduce

Here is my full log:

~/repo/web-llm emcc
emcc: error: no input files

~/repo/web-llm ./scripts/prep_deps.sh
+ emcc --version
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.45-git
Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)
This is free and open source software under the MIT license.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

+ npm --version
9.5.1
+ TVM_HOME_SET=/Users/parismorgan/repo/mlc-llm/3rdparty/tvm
+ [[ -z /Users/parismorgan/repo/mlc-llm/3rdparty/tvm ]]
+ cd /Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web
+ make
make: Nothing to be done for `all'.
+ npm install

up to date, audited 760 packages in 2s

61 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
+ npm run build

> [email protected] build
> rollup -c


src/index.ts → lib/index.js...
[!] (plugin rpt2) Error: src/webgpu.ts:161:5 - error TS2322: Type 'RenderingContext' is not assignable to type 'GPUCanvasContext'.
  Type 'CanvasRenderingContext2D' is missing the following properties from type 'GPUCanvasContext': __brand, configure, unconfigure, getPreferredFormat, getCurrentTexture

161     this.canvasContext = ctx;
        ~~~~~~~~~~~~~~~~~~

src/index.ts

    at error (/Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup/dist/shared/rollup.js:198:30)
    at throwPluginError (/Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup/dist/shared/rollup.js:21718:12)
    at Object.error (/Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup/dist/shared/rollup.js:22672:20)
    at RollupContext.error (/Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup-plugin-typescript2/src/context.ts:35:17)
    at /Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup-plugin-typescript2/src/diagnostics.ts:70:17
    at Array.forEach (<anonymous>)
    at printDiagnostics (/Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup-plugin-typescript2/src/diagnostics.ts:42:14)
    at typecheckFile (/Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup-plugin-typescript2/src/index.ts:67:3)
    at Object.<anonymous> (/Users/parismorgan/repo/mlc-llm/3rdparty/tvm/web/node_modules/rollup-plugin-typescript2/src/index.ts:257:5)
    at Generator.next (<anonymous>)

+ rm -rf tvm_home
+ ln -s /Users/parismorgan/repo/mlc-llm/3rdparty/tvm tvm_home
+ npm install

up to date, audited 760 packages in 970ms

61 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
+ cd examples/simple-chat
./scripts/prep_deps.sh: line 22: cd: examples/simple-chat: No such file or directory

~/repo/web-llm ls examples/simple-chat
README.md         dist              package-lock.json package.json      src

Because this fails to build I then can't do npm run build:

~/repo/web-llm npm i
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added

added 652 packages, and audited 654 packages in 2s

64 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
~/repo/web-llm
~/repo/web-llm npm run build

> @mlc-ai/[email protected] build
> rollup -c && ./cleanup-index-js.sh


src/index.ts → lib/index.js...
[!] (plugin rpt2) Error: src/chat_module.ts:1:24 - error TS2307: Cannot find module 'tvmjs' or its corresponding type declarations.

1 import * as tvmjs from "tvmjs";
                         ~~~~~~~

src/index.ts

    at error (/Users/parismorgan/repo/web-llm/node_modules/rollup/dist/shared/rollup.js:198:30)
    at throwPluginError (/Users/parismorgan/repo/web-llm/node_modules/rollup/dist/shared/rollup.js:21718:12)
    at Object.error (/Users/parismorgan/repo/web-llm/node_modules/rollup/dist/shared/rollup.js:22672:20)
    at RollupContext.error (/Users/parismorgan/repo/web-llm/node_modules/rollup-plugin-typescript2/src/context.ts:35:17)
    at /Users/parismorgan/repo/web-llm/node_modules/rollup-plugin-typescript2/src/diagnostics.ts:70:17
    at Array.forEach (<anonymous>)
    at printDiagnostics (/Users/parismorgan/repo/web-llm/node_modules/rollup-plugin-typescript2/src/diagnostics.ts:42:14)
    at typecheckFile (/Users/parismorgan/repo/web-llm/node_modules/rollup-plugin-typescript2/src/index.ts:67:3)
    at Object.<anonymous> (/Users/parismorgan/repo/web-llm/node_modules/rollup-plugin-typescript2/src/index.ts:257:5)
    at Generator.next (<anonymous>)

Workaround

To work around this I changed to private canvasContext: any; in 3rdparty/tvm/web/src/webgpu.ts.

The root issue is around the type returned by const ctx = canvas.getContext("webgpu"); not being GPUCanvasContext.