Search code examples
typescriptdenowebgpu

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

Update (2024/03/06): Experimental WebGPU support has been re-enabled in Deno 1.39. This issue still persists for me - what's the solution?

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 (stolen from their announcement):

// Try to get an adapter from the user agent.
const adapter = await navigator.gpu.requestAdapter();
if (adapter) {
  // Print out some basic details about the adapter.
  const adapterInfo = await adapter.requestAdapterInfo();

  // On some systems this will be blank...
  console.log(`Found adapter: ${adapterInfo.device}`);

  // Print GPU feature list
  const features = [...adapter.features.values()];
  console.log(`Supported features: ${features.join(", ")}`);
} else {
  console.error("No adapter found");
}

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"
        ]
    },
    "unstable": [
        "webgpu"
    ],
    "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 Deno 2.0.
Use an alternative bundler like "deno_emit", "esbuild" or "rollup" instead.
Check file:///<repo>/ui/static/script/run.ts
error: TS2339 [ERROR]: Property 'gpu' does not exist on type 'Navigator'.
const adapter = await navigator.gpu.requestAdapter();
                                ~~~
    at file:///<repo>/ui/static/script/run.ts:2:33

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 "unstable": ["webgpu"] to deno.jsonc.

Both of which seem to have zero affect.

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

Solution

  • 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:

    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.