[LAB-10] The top-level-await experiment is not enabled 에러관련 질문입니다.

[hyunzsu]

질문 작성자

현지수

문제 상황

• 1. firebase 설치 이후 간단한 코드로 데이터를 불러오려고 했습니다.
• 2. 스크린샷과 같은 오류가 발생하여 찾아보았지만 더이상 진전이 없어서 질문드립니다.

프로젝트 저장소 URL

환경 정보

• Mac OS
• node 18.14.1 "firebase": "^9.17.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4"

[hyunzsu]

godlife.zip node_modules 제외한 프로젝트 파일 첨부합니다!

[yamoo9]

문제 상황

The top-level-await experiment is not enabled 에러가 발생합니다.

문제 해결

await를 async 함수 외부에서 사용할 수 없어 발생한 오류입니다. 사이드 이펙트이므로 useEffect 훅 내부에서 실행해야 합니다. 아래 이미지와 코드를 참고해보세요. 😊

CurrentChallengeContainer.jsx

import { CurrentChallengeCard } from 'components';
import { doc, getDoc } from 'firebase/firestore';
import { dbService as db } from 'fbase';
import { useEffect } from 'react';

function CurrentChallengeContainer() {
  useEffect(() => {
    const docRef = doc(db, 'challenges2', '1');

    (async () => {
      const docSnap = await getDoc(docRef);

      try {
        if (docSnap.exists()) {
          console.log('Document data:', docSnap.data());
        } else {
          console.log('No such document!');
        }
      } catch (error) {
        console.log('Error getting document:', error);
      }
    })();
  }, []);

  return (
    <div className="w-[390px] bg-background px-[28px]">
      <CurrentChallengeCard />
    </div>
  );
}

export default CurrentChallengeContainer;