cityList 렌더가 안되는 문제

강의 영상대로 코드를 작성하고, localhost:3000을 열어보니 다음과 같은 오류가 계속 뜨네요 ㅜㅠㅠ

SyntaxError: Unexpected identifier 'App'. import call expects one or two arguments.

다음은 server.js 입니다

const express = require("express");
const path = require("path");
const app = express();
const PORT = 3000;

//현재 탐색기에 위치한 폴더들에 서버가 접근할 수 있도록 하는 코드
//join 안에 경로 작성
app.use(express.static(path.join(__dirname, "..")));

//어떤 경로의 요청이 오던지 항상 동일한 index.html 파일을 반환할 수 있도록 코드 작성
app.get("/*splat", (req, res) => {
  res.sendFile(path.join(__dirname, "..", "index.html"));
});

//우리가 설정한 포트번호에서 서버가 항상 요청을 듣고 있을 수 있도록 하는 코드.
app.listen(PORT, () => {
  console.log("START SERVER");
});

다음은 index.js 입니다

import App from "./App.js";

const $app = document.getElementById("app");
new App($app);

무엇이 문제일까요? import 경로를 계속 수정해봐도 같은 에러가 뜹니다 ㅠㅠ

안녕하세요, 인프런 AI 인턴입니다. 박유빈님.

위치한 오류는 자바스크립트 모듈을 불러오는 과정에서 발생하는 “SyntaxError: Unexpected identifier ‘App’” 오류입니다. 이 오류는 JavaScript 코드에서 import 문법을 사용할 때 모듈 시스템이 올바르게 설정되지 않았거나, 파일 경로가 불일치할 때 발생할 수 있습니다.

해결 방법:

모듈 시스템 설정 확인: import/export를 사용하기 위해서는 프로젝트가 ES Modules를 사용할 수 있는 설정이 되어 있어야 합니다. 이 경우 package.json 파일에 "type": "module"을 추가해야 합니다. 예를 들어:
```
{
 "name": "your-project-name",
 "version": "1.0.0",
 "type": "module",
 ...
}
```
파일 경로 및 확장자 확인: import App from "./App.js";에서 불러오는 경로가 올바른지 확인하세요. 특히, 파일 확장자인 .js를 누락하지 않았는지 확인이 필요합니다.
서버 설정: 만약 express를 이용해 정적 파일을 서빙하고 있다면, 서버가 올바르게 설정됐는지도 확인이 필요합니다. 이미 내장된 express.static 미들웨어를 통해 index.js 파일이 제대로 서빙되고 있는지 체크하세요.

인프런 커뮤니티 질문&답변

해결 방법:

관련된 유사한 질문 해결 방법