WebGPURenderer: Top-level await is not available in vite.

[linbingquan]

Description

As the title.

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    node_modules/.pnpm/three@0.155.0/node_modules/three/examples/jsm/renderers/webgpu/WebGPUBackend.js:24:18:
      24 │   _staticAdapter = await navigator.gpu.requestAdapter();
         ╵                    ~~~~~

Reproduction steps

1. pnpm create vite threejs-template --template vanilla-ts

2. cd threejs-template

3. pnpm install

4. pnpm install -D three

5. replace main.ts source code with:

import WebGPURenderer from "three/examples/jsm/renderers/webgpu/WebGPURenderer.js";

new WebGPURenderer();

6. pnpm dev

the terminal will show the error info

Code

node --version
v18.17.1

Live example

None

Screenshots

No response

Version

r155

Device

Desktop

Browser

No response

OS

Windows

[CodyJasonBennett]

I just ran into this with my four library for the same reason. This comes from Vite's optimizeDeps, they're strangely very loose -- notably looser than WebGPU/WebGL 2 supported browsers.

You can use https://github.com/Menci/vite-plugin-top-level-await or tweak the target with:

// vite.config.js
optimizeDeps: {
  esbuildOptions: {
    target: 'esnext'
  }
},
build: {
  target: 'esnext'
}

It's a bit unfortunate Vite/ESBuild/browserslist is pedantic about this since ESM spec guarantees the availability of top-level await since early 2021. I'm not aware of a workaround for libraries at the moment.

[Mugen87]

three.js requires a static (WebGPU) adapter for its API so I fear it will be hard to fix this on engine level. Let's hope the tooling will improve support for top-level await soon.

[coderextreme]

I just ran into this with my four library for the same reason. This comes from Vite's optimizeDeps, they're strangely very loose -- notably looser than WebGPU/WebGL 2 supported browsers.

You can use https://github.com/Menci/vite-plugin-top-level-await or tweak the target with:

// vite.config.js
optimizeDeps: {
  esbuildOptions: {
    target: 'esnext'
  }
},
build: {
  target: 'esnext'
}

It's a bit unfortunate Vite/ESBuild/browserslist is pedantic about this since ESM spec guarantees the availability of top-level await since early 2021. I'm not aware of a workaround for libraries at the moment.

Is this good if I'm not doing a build, just using THREE?