eslint 설정 후 오류가 납니다.

Question

강의대로 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   파싱 오류 같은데 어느 설정파일을 수정해야 할까요?

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. CNTTECH님, 제공하신 에러 메시지를 보면 Vite와 ESLint의 설정에서 &lsquo;import&rsquo; 키워드가 예약어라는 오류가 발생하고 있는 것으로 보입니다. 이는 주로 ESLint가 파일을 잘못된 구문으로 해석하려고 할 때 발생할 수 있는 문제입니다. 다음과 같은 방법을 시도해보세요: ESLint 설정 확장 확인 : ESLint 설정 파일에서 "extends": ["react-app"] 를 사용하고 계신데, 이는 일반적으로 Create React App 을 위한 설정입니다. Vite와 함께 사용할 경우 손볼 부분이 있을 수 있습니다. Vite-React 프로젝트에 맞는 설정을 추가하십시오. 예를 들어, eslint:recommended 나 Vite와 호환되는 다른 설정 확장을 추가해보세요. 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 와 같이 추가된 플러그인의 세부 설정을 검토해 보세요. 이러한 수정들을 시도한 후에도 문제가 해결되지 않는다면, 설치된 플러그인의 버전 호환성을 다시 확인해 보시고, node_modules 와 package-lock.json (또는 yarn.lock ) 파일을 삭제한 후 다시 패키지를 설치( npm install 또는 yarn ) 하시는 것을 추천드립니다. 도움이 되셨길 바랍니다. 추가 질문이 있으시면 언제든지 말씀해 주세요!