빌드 중 top level await 에러

문제점

🚨 Vercel로 배포하면서 빌드 중에 Top-level await 에러 발생하여 빌드 실패

 

 

오류 메세지

💬 error during build:

---

Error:

[vite:esbuild-transpile] Transform failed with 2 errors:

---

assets/index-!~{001}~.js:29703:19: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

---

assets/index-!~{001}~.js:29704:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

 

아직 백엔드와 연결하기 전이어서 배포 후에도 msw가 작동하도록 코드를 수정했는데 top level에서 await을 쓸 수 없다는 오류 메세지.

 

 

// main.tsx

const { worker } = await import('./mocks/browser.ts');
await worker.start({
  onUnhandledRequest: 'bypass',
});

 

 

 

Top-level-await ⁉️

async 함수의 스코프 내부에서 동작하지 않고, 모듈의 최상단에서 await 키워드를 활용해 비동기 함수를 처리하는 개념을 Top-level await라 한다.

이 개념이 표준이 되기 이전에도 dev모드에서는 정상작동했으나 공식적인 표준으로 인정받은 시점은 ES2022 부터이다.

 

(출처: https://velog.io/@whaleinmilktea/Vite-빌드-시-Top-level-await-Error)

 

 

해결방안 1 : vite-plugin-top-level-await vite 플러그인 설치

npm: vite-plugin-top-level-await

vite-plugin-top-level-await

 

 

 

✅ 해결방안 2 : tsconfig.json 파일 수정

{
  "compilerOptions": {
    "target": "ES2022",
    // ... 생략
}