[트러블슈팅] vite + react + typescript 프로젝트 생성중 eslint 오류

Innes·2024년 12월 5일
0

Projects

목록 보기
13/16

📝 참고) vite + react + typescript 프로젝트 생성에 큰 도움을 받은 블로그 👍

  • 분명... 이 블로그대로 하면 vite으로 react + ts 프로젝트 생성하는데 문제 없을 줄 알았는데... 생각지 못한 여러 문제들을 직면하게 되어 정리하는 트러블슈팅...!

😡 에러 : main.tsx, App.tsx에서 jsx 내 'React' 사용 영역 관련 오류

에러메시지 : 'React' must be in scope when using JSX eslint(react/react-in-jsx-scope)

🎁 해결 : eslint 설정 변경하기

❌ 해결 전 eslint.config.js

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],},
  { files: ["**/*.js"], languageOptions: { sourceType: "script" } },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

🙆🏻‍♀️ 해결 후 eslint.config.js

  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
  },
  pluginReact.configs.flat.recommended,
  {
    rules: {
      "react/react-in-jsx-scope": "off", // 규칙 비활성화
    },
  1. rules에 "react/react-in-jsx-scope": "off" 추가
    -> 여전히 에러 해결 안됨
  2. 가장 하단에 있던 pluginReact.configs.flat.recommended를 상단으로 이동
    -> 해결 완료!

📝 해결된 이유에 대한 gpt의 설명

  • ESLint Flat Config의 우선순위 문제
    Flat Config에서 규칙은 각 구성 요소(pluginReact.configs.flat.recommended 등)가 덮어쓸 수 있습니다. rules를 명시적으로 추가했더라도 플러그인 설정이 우선 적용되면 해당 규칙이 무시될 수 있습니다.
  • 해결 방법:
    pluginReact.configs.flat.recommended를 사용한 후에, 별도의 배열 요소로 rules를 덮어씌웁니다.
    ⭐️ Flat Config에서는 순서가 중요합니다.
profile
무서운 속도로 흡수하는 스펀지 개발자 🧽

0개의 댓글

관련 채용 정보