인프런 커뮤니티 질문&답변
작성한 질문수
eslint 설정 후 오류가 납니다.
작성
·
22
0
강의대로 eslint 설정한 후
{
"extends" : [
"react-app"
]
}
npm run dev 하면 아래와 같은 에러가 납니다.
VITE v6.0.3 ready in 354 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
오후 4:41:35 [vite] Internal server error:
C:\Dev\fullstack-app\frontend\src\main.jsx
1:1 error Parsing error: The keyword 'import' is reserved
✖ 1 problem (1 error, 0 warnings)
Plugin: vite-plugin-eslint
File: C:/Dev/fullstack-app/frontend/src/main.jsx
at TransformPluginContext._formatError (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47158:41)
at TransformPluginContext.error (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47153:16)
at TransformPluginContext.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async EnvironmentPluginContainer.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18)
at async loadAndTransform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)
오후 4:41:35 [vite] Pre-transform error:
C:\Dev\fullstack-app\frontend\src\main.jsx
1:1 error Parsing error: The keyword 'import' is reserved
파싱 오류 같은데 어느 설정파일을 수정해야 할까요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
CNTTECH님, 제공하신 에러 메시지를 보면 Vite와 ESLint의 설정에서 ‘import’ 키워드가 예약어라는 오류가 발생하고 있는 것으로 보입니다. 이는 주로 ESLint가 파일을 잘못된 구문으로 해석하려고 할 때 발생할 수 있는 문제입니다. 다음과 같은 방법을 시도해보세요:
ESLint 설정 확장 확인:
- ESLint 설정 파일에서
"extends": ["react-app"]를 사용하고 계신데, 이는 일반적으로 Create React App을 위한 설정입니다. Vite와 함께 사용할 경우 손볼 부분이 있을 수 있습니다. Vite-React 프로젝트에 맞는 설정을 추가하십시오. 예를 들어,eslint:recommended나 Vite와 호환되는 다른 설정 확장을 추가해보세요.
- ESLint 설정 파일에서
babel-eslint 사용:
@babel/eslint-parser를 사용하는 것도 하나의 방법입니다.eslint가 최신 자바스크립트 구문을 이해할 수 있도록parser를 명시해줘야 할 수도 있습니다.
{ "parser": "@babel/eslint-parser", "extends": ["react-app"] }Vite 설정 확인:
- Vite의 설정 파일 (예:
vite.config.js나vite.config.ts)에서 확인할 부분이 없는지 점검해 보세요. 특히vite-plugin-eslint와 같이 추가된 플러그인의 세부 설정을 검토해 보세요.
- Vite의 설정 파일 (예:
이러한 수정들을 시도한 후에도 문제가 해결되지 않는다면, 설치된 플러그인의 버전 호환성을 다시 확인해 보시고, node_modules와 package-lock.json (또는 yarn.lock) 파일을 삭제한 후 다시 패키지를 설치(npm install 또는 yarn) 하시는 것을 추천드립니다.
도움이 되셨길 바랍니다. 추가 질문이 있으시면 언제든지 말씀해 주세요!