top-level await 에러 대응 (WebGPU를 import 하기 위한 코드에서 …)

아래의 코드가 실행되면 서두부터 await가 실행됩니다. 즉, top-level에서 await가 실행되는 거죠. 이게 Vite에서는 문제가 발생합니다.

import WebGPU from "three/addons/capabilities/WebGPU.js"

이를 해결하기 위해서는 먼저 개발환경에서 다음과 같은 패키지를 설치해야 합니다.

npm install --save-dev vite-plugin-top-level-await

그리고 vite.config.js 파일을 만들어 다음처럼 내용을 구성합니다.

import { defineConfig } from "vite";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins:[
    topLevelAwait({
      // promiseExportName: "__tla",
      // promiseImportName: i => `__tla_${i}`
    })
  ],
});