# Top-Level Await Error with Vite and Three.js: 'Top-level await is not available in the configured target environment

**URL:** <https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189>\
**Category:** Questions\
**Created:** [July 16, 2024, 3:32am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189 "2024-07-16T03:32:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lanvada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lanvada/32/43340_2.png) [@lanvada](https://discourse.threejs.org/u/lanvada)\
**Post date:** [July 16, 2024, 3:32am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189/1 "2024-07-16T03:32:14Z")

</div>

I am currently experimenting with the WebGPU in Three.js using Vite as my module bundler. However, I’ve encountered an issue with top-level await in my project. Below is the snippet of code that is causing the problem:

```typescript
import WebGPU from 'three/examples/jsm/capabilities/WebGPU.js';
import WebGPURenderer from 'three/examples/jsm/renderers/webgpu/WebGPURenderer.js';

await new Promise((resolve) => setTimeout(resolve, 1000));

if (WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false) {
  document.body.appendChild(WebGPU.getErrorMessage());
  throw new Error('No WebGPU or WebGL2 support');
}

```

When I run this code, I receive the following error message:

```javascript
X [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
    node_modules/three/examples/jsm/capabilities/WebGPU.js:14:15:
      14 │ isAvailable = await navigator.gpu.requestAdapter();

```

The first `await` in my code works as expected, but it seems the `await` inside the `WebGPU.js` module is causing issues. I am puzzled why the first `await` can run but the second one in the module cannot. Could this be a configuration issue with Vite or something specific about how Three.js handles these modules?

I would appreciate any insights or suggestions on how to resolve this issue. Thank you!

---

<div class="post-metadata">

**Author:** ![lanvada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lanvada/32/43340_2.png) [@lanvada](https://discourse.threejs.org/u/lanvada)\
**Post date:** [July 16, 2024, 3:37am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189/2 "2024-07-16T03:37:19Z")

</div>

- My `tsconfig.json` is set with `"target": "ESNext"`.

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [July 16, 2024, 3:44am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189/3 "2024-07-16T03:44:56Z")

</div>

I remember that issue. Here is my solution. I think it will help you

> [@IWebGPU: I get this error message when I try to import webgpu](https://discourse.threejs.org/t/iwebgpu-i-get-this-error-message-when-i-try-to-import-webgpu/53171):
>
> I have a WebGPU enabled browser with which I can experience the threejs examples (firefox nightly). If I now try to integrate webGPU into my project, I get the following error message in the terminal. VITE v4.3.9 ready in 658 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help ✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides) node\_modules/…

---

<div class="post-metadata">

**Author:** ![lanvada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lanvada/32/43340_2.png) [@lanvada](https://discourse.threejs.org/u/lanvada)\
**Post date:** [July 16, 2024, 3:48am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189/4 "2024-07-16T03:48:53Z")

</div>

Ah, thank you so much! But I’m still curious why the `await` I wrote myself executes normally, whereas the “top-level await” in the imported module throws an error?

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [July 16, 2024, 4:01am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189/5 "2024-07-16T04:01:41Z")

</div>

Unfortunately, I can’t tell you exactly how vite works because I don’t know.

But you don’t need that anymore.

```javascript
await new Promise((resolve) => setTimeout(resolve, 1000));

if (WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false) {
  document.body.appendChild(WebGPU.getErrorMessage());
  throw new Error('No WebGPU or WebGL2 support');
}

```

there is also one more

```javascript
await.renderer.init();

```

I recommend using this in your app init. This ensures that the renderer is ready before everything else is carried out.

---

<div class="post-metadata">

**Author:** ![lanvada](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lanvada/32/43340_2.png) [@lanvada](https://discourse.threejs.org/u/lanvada)\
**Post date:** [July 16, 2024, 4:04am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189/6 "2024-07-16T04:04:21Z")

</div>

Okay, thanks. But, the `await` I wrote myself was just to test if it could run.

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [July 16, 2024, 4:14am UTC](https://discourse.threejs.org/t/top-level-await-error-with-vite-and-three-js-top-level-await-is-not-available-in-the-configured-target-environment/68189/7 "2024-07-16T04:14:17Z")

</div>

I think this is because your await does not contain any dependencies and can therefore be executed. But vite won’t care because it has no influence on the vite configuration. Your await is not a top level await for vite but a top level await in your app and vite must already be running for that. But vite needs its own top level await for this and you can’t implement that in the app that vite is supposed to run.

So Vite can already be running and your await can run. But since the top level await is not available in vite itself, which is necessary for webgpu, webgpu cannot be executed. But since webgpu is not necessary for your await, this can be done. But that’s just speculation on my part.