deno bundle - Property 'gpu' does not exist on type 'Navigator' [TS2339]

Question

In Deno 1.8, unstable/experimental support for WebGPU was added.

With WebGPU landing in Chrome Stable 113, I decided it was about time I start my foray into graphics programming. I do understand that no other browser has this feature enabled by default (yet).

Here is a basic example I tried getting up and running:

document.addEventListener("DOMContentLoaded", (): void => {
  const _game: Game = new Game();
});

class Game {
  constructor() {
    const canvas: HTMLElement | null = document.getElementById("webgpu-canvas");
    if (canvas === null) {
      throw Error("Failed to get canvas.");
    }
    if (!(canvas instanceof HTMLCanvasElement)) {
      throw Error("Canvas was unexpectedly not an HTMLCanvasElement.");
    }

    // dimensions
    const aspectRatio: number = 16 / 9;
    const width = 1000;
    const height: number = width / aspectRatio;

    // handle hdpi
    const devicePixelRatio: number = window.devicePixelRatio;
    canvas.width = canvas.width * devicePixelRatio;
    canvas.height = canvas.height * devicePixelRatio;
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;

    if (!navigator.gpu) {
      throw Error("WebGPU not supported on this browser.");
    }
  }
}

Here is the command I'm using to bundle my code: deno bundle --config deno.jsonc ui/static/script/run.ts bin/static/script/run.js

And here is the associated deno.jsonc (make note - I'm targeting the browser):

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"]
  },
  "lint": {
    "include": ["ui/static/script/"]
  },
  "fmt": {
    "include": ["ui/static/script/"],
    "lineWidth": 120
  }
}

When I try bundling this basic example, I get this error:

Warning "deno bundle" is deprecated and will be removed in the future.
Use alternative bundlers like "deno_emit", "esbuild" or "rollup" instead.
Check file:///<private-path>/ui/static/script/run.ts
error: TS2339 [ERROR]: Property 'gpu' does not exist on type 'Navigator'.
    if (!navigator.gpu) {
                   ~~~
    at file:///<private-path>/ui/static/script/run.ts:27:20

I've tried a couple things:

1. Adding --unstable after deno bundle
   • (Yes - I'm aware deno bundle may be deprecated soon. The Deno community did not like this decision, and it seems like it is still up for debate.)
2. Adding "deno.unstable" to the deno.jsonc field #/compilerOptions/lib

Both of which seem to have zero affect.

How do I get access to WebGPU when developing Typescript with Deno?

Answer 1

At the current time (Deno is at version 1.34.3 as I write this answer), the WebGPU API is not available in Deno.

Here's a chronological list of related events:

• 2020-10-07: Requested in denoland/deno#7863
• 2021-03-01: Implemented in denoland/deno#7977
• 2023-03-16: Removed in denoland/deno#18094

If you want to follow the status of potential re-implementation, there's an open issue in the related examples repo: denoland/webgpu-examples#13.

---

Re: Bundling

You should never bundle code destined for a browser environment using Deno's deprecated built-in bundler tool — it was never designed to produce code for consumption outside of the Deno runtime. (Per the warning you saw — it's deprecated and will be removed, so you really shouldn't be using it anymore at all — it's time to seek an alternative tool.)

Since you might wonder how to proceed with an alternative — here's a suggestion: Luca (Deno core team) maintains esbuild_deno_loader, which is a plugin I've used successfully with esbuild to bundle Deno TypeScript codebases. Both include usage documentation.