Trouble Shooting

만들었던 프로젝트를 Vercel에서 배포를 하려고 했는데 아래와 같은 오류가 발생

오류 메시지

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

원인

위 오류메시지를 통해 원인을 찾았다. 사실 구글링
우리가 작성했던 코드의 환경에서 vercel로 넘기려고 했을 때

Top-level await기능은 해당 환경에서 사용 할 수 없다.

해당 js문법은 ES2022에서 나온 기능으로 모듈의 최상위 스코프에서 비동기 동작을 await하여 사용 할수 있는 기능.
기능을 사용했을 경우 아래와 같이 일부 브라우저에서는 호환되지 않음.

결론 : 배포를 위해서는 해당 문법을 사용 가능하게 환경설정(esbuild)을 바꿔줄 필요가 있음.

❓esbuild

새롭게 떠오르는 웹 기술로, esbuild의 개발자이자 Figma의 공동창설자인 Evan W는, esbuild는 웹을 위한 연결고리(linker)라고 표현

❓esbuild를 무엇에 사용할까?

• 먼저 자바 스크립트(js, jsx, ts, 및 tsx)와 CSS 등을 배포가능한 형태로 링크할 수 있음
• 그리고 번들링 또는 코드 분할, 플러그인 등을 사용가능하며
• esbuild의 핵심 기능이라고 할 수 있는 부분컴파일 , 감시 모드 및 서비스 모드 등 의 기능을 사용가능

해결

변경 전 코드

// vite.config.js
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
});

변경 후 코드

// vite.config.js
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  build: {
    target: 'es2022'
  },
  esbuild: {
    target: 'es2022'
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2022'
    }
  }
});

설명 : JavaScript 빌드 도구인 esbuild와 관련된 설정

1. build: { target: "es2022" }
   빌드 도구가 JavaScript의 ES2022 (ECMAScript 2022) 표준을 대상으로 빌드하도록 설정
   즉, 생성된 코드가 ES2022 표준을 준수하도록 함

2. esbuild: { target: "es2022" }
   esbuild 자체의 설정으로, 빌드할 때 ES2022 표준을 대상으로 하도록 지정

3. optimizeDeps: { esbuildOptions: { target: "es2022" } }
   의존성 최적화 과정에서 esbuild를 사용할 때 ES2022 표준을 대상으로 하도록 설정

전체적으로, 이 설정 파일은 프로젝트의 빌드와 최적화 과정에서 모두 최신 ES2022 표준을 사용하도록 지정하고 있으며,
이는 최신 JavaScript 기능을 활용하고, 최신 브라우저와의 호환성을 극대화하기 위한 설정

해당 내용 설정 후 배포 완료

---

참고자료
top level await
esbuild
이슈 해결