📝 참고) vite + react + typescript 프로젝트 생성에 큰 도움을 받은 블로그 👍
- 분명... 이 블로그대로 하면 vite으로 react + ts 프로젝트 생성하는데 문제 없을 줄 알았는데... 생각지 못한 여러 문제들을 직면하게 되어 정리하는 트러블슈팅...!
에러메시지 :
'React' must be in scope when using JSX eslint(react/react-in-jsx-scope)
❌ 해결 전 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", // 규칙 비활성화
},
"react/react-in-jsx-scope": "off"
추가pluginReact.configs.flat.recommended
를 상단으로 이동📝 해결된 이유에 대한 gpt의 설명
- ESLint Flat Config의 우선순위 문제
Flat Config에서 규칙은 각 구성 요소(pluginReact.configs.flat.recommended 등)가 덮어쓸 수 있습니다. rules를 명시적으로 추가했더라도 플러그인 설정이 우선 적용되면 해당 규칙이 무시될 수 있습니다.- 해결 방법:
pluginReact.configs.flat.recommended를 사용한 후에, 별도의 배열 요소로 rules를 덮어씌웁니다.
⭐️ Flat Config에서는 순서가 중요합니다.