export default 모듈 불러오기 에러

1. 배경

1.1 개발 환경

Vite React JavaScript

1.2 문제 상황

components 폴더 하위에 3개의 컴포넌트 생성 후
index.js에 3개의 컴포넌트를 다시 내보내기 형식으로 코드 작성
App.jsx에서 3개 중 2개의 컴포넌트만 사용하려 import 시 브라우저에 콘솔 에러 발생

// src/components/index.js
import ACompo from "./ACompo";
import BCompo from "./BCompo";
import CCompo from "./CCompo";

export default { ACompo, BCompo, CCompo }; 

// App.jsx
import { ACompo, BCompo } from "./components"; // ❗️문제 코드

export default function App() {
  return (
    <>
      <ACompo />
      <BCompo />
    </>
  );
}

# ❗️브라우저 콘솔 에러
Uncaught SyntaxError: The requested module 
'/src/components/index.js' does not provide 
an export named 'ACompo' (at App.jsx:1:46)

2. 원인

default export 한 모듈을 가져오려면 중괄호가 아니라 모듈을 직접 가져와야한다.

// App.jsx
import { ACompo, BCompo } from "./components"; // ❗️문제 코드

export default function App() {
  return (
    <>
      <ACompo />
      <BCompo />
    </>
  );
}

3. 해결

// App.jsx
import Component from "./components"; // ✅ 수정 코드

export default function App() {
  return (
    <>
      <Component.ACompo />
      <Component.BCompo />
    </>
  );
}

4. 참고

모던 웹 자바스크립트 튜토리얼 - 모듈 내보내고 가져오기