[Frontend] React Native + ESLINT v9 Flat Config

목차 (OPEN)

• 📑 들어가며
• 🟥 MODULE_TYPELESS_PACKAGE_JSON 경고
• 🟧 A config object is using the "extends" key 에러
• 🟨 React version not specified 경고
• 🟩 babel.config.js: 'module' is not defined
• 🟦 React Hooks / Refresh가 Flat Config에서 동작 안 함
• 🟪 lint 실행했는데 아무 규칙이 적용되지 않음
• ⬛ 최종 설정 파일

 

 

 

 

 

📑 들어가며

앞선 포스팅에서 알아봤듯이

ESLint v9부터 기존의 .eslintrc는 정식 지원이 종료되고,
새로운 Flat Config 방식 (eslint.config.js)을 사용해야 한다.

 

이번에 동아리에서 새 프로젝트를 시작하면서
Expo + React Native 환경에 맞춰 ESLint를 미리 세팅해두려고 했는데  ,,

Expo + React Native 환경에서는 어떻게 해야하는지 정리해 둔 블로그가 딱히 없어서

설정하는 데 여러 에러들이 자꾸 나서 상당히 화가 났었다 ,, ^^ ,,🤯

 

그래서 이후에 혹시 설정하실 분들이 참고할 수 있도록

짧게나마 발생했던 에러들을 어떻게 수정했는지 정리해두고자 한다.

 

 

---

🟥 MODULE_TYPELESS_PACKAGE_JSON 경고

Warning: Module type of file:///.../eslint.config.js is not specified

 

💡 원인

eslint.config.js 내부에 ES Module 문법을 쓰면
Node가 “이 파일 ESM인지 CJS인지 모르겠음” 하고 경고를 띄우는 것이다.

(즉, 파일의 모듈 타입이 명확하지 않아서 생기는 문제이다.)

 

✅ 해결

Flat Config는 CommonJS로 작성하는 게 가장 안정적이라고 한다.

그래서 파일명을 .cjs로 바꾸고 require 방식으로 작성해주니 경고가 사라다.

// eslint.config.cjs 로 작성
const js = require("@eslint/js");

 

📌 참고

사실 처음에는 package.json에 아래처럼 "type": "module"을 추가해서
ESM으로 강제 인식시키는 방향으로 접근했었다.

"type": "module"

 

하지만 이렇게 변경하니 ESM 관련 오류들이 연쇄적으로 터지기 시작했고,
Expo + RN 환경에서는 그 에러들을 하나씩 해결하는 것이 훨씬 더 까다로웠다.

 

그래서 좀 더 검색해보니, React Native 기반 프로젝트에서는

CJS 방식으로 Flat Config를 구성하는 사례가 훨씬 많고, 더 안정적이라는 점을 확인했다.
그래서 굳이 ESM을 고집할 필요가 없다는 결론을 내리고, 깔끔하게 CJS로 결정했다 🤗

 

 

---

🟧 A config object is using the "extends" key 에러

A config object is using the "extends" key, which is not supported in flat config system.

 

💡 원인

Flat Config에서는 더 이상 "extends"를 사용할 수 없어서 발생하는 에러이다.

(즉, 기존 .eslintrc 방식의 확장 구조가 Flat Config에서는 완전히 제거되었기 때문에 발생하는 오류다.)

 

✅ 해결

기존에 아래와 같이 작성했었던 코드를

extends: ["eslint:recommended", "plugin:react/recommended"];

 

이렇게 아래처럼 아래처럼 각 플러그인의 preset을 배열로 직접 나열해주는 방식으로 바꾸어주었다.

module.exports = [
  js.configs.recommended,
  reactPlugin.configs.flat.recommended,
  ...
];

 

 

---

🟨 React version not specified 경고

Warning: React version not specified in eslint-plugin-react settings.

 

💡 원인

Flat Config 구조에서는 settings가 최상단으로 분리돼 있어서
eslint-plugin-react의 react.version 자동 감지가 제대로 안 되는 경우가 많다고 한다.

그래서 React 버전을 명시하지 않으면 위와 같은 경고가 발생한다.

 

✅ 해결

얜 간단히 그냥 명시적으로 적어주기만 하면 끝이다.

settings: {
  react: {
    version: "19.1.0", // 각자 버전에 맞게 알아서 ,,
  },
}

 

 

---

🟩 babel.config.js: 'module' is not defined

'module' is not defined no-undef

 

💡 원인

babel.config.js는 무조건 CJS 문법을 사용해야 하는데,
하지만 ESLint는 기본적으로 CJS 전역(module, require)을 모르기 때문에 발생하는 에러이다.

(즉, Babel은 CJS 파일인데 ESLint는 ESM 기준으로 검사해서 충돌하는 상황이다.)

 

✅ 해결

그냥 ESLint 설정 하단에다가 babel.config.js을 따로 빼서 ignore 처리 해주었다.

{
    files: ["babel.config.js"],
    languageOptions: {
      globals: {
        module: "readonly",
        require: "readonly",
      },
    },
    rules: {},
  }

 

이렇게 하면 Babel 설정 파일만 예외적으로 정상 검사되며,
Flat Config의 나머지 규칙과도 충돌하지 않는다.

 

---

🟦 React Hooks / Refresh가 Flat Config에서 동작 안 함

💡 원인

Flat Config에서는 기존 .eslintrc처럼
plugins: ["react", "react-hooks", ...] 같은 문자열 기반 플러그인 선언이 지원되지 않는다.

대신, 플러그인을 반드시 객체 형태로 직접 등록해야만 정상 동작하기 때문에
문자열로 넣으면 플러그인을 읽지 못해 Hooks 규칙과 Refresh 규칙이 전혀 적용되지 않는 것이다.

 

✅ 해결

플러그인을 아래처럼 객체 형태로 명시적으로 선언해주면 된다.

plugins: {
  react: reactPlugin,
  "react-hooks": reactHooks,
  "react-refresh": reactRefresh,
},

 

 

---

🟪 lint 실행했는데 아무 규칙이 적용되지 않음

💡 원인

일반 규칙보다 확장 규칙(js.configs.recommended 등)을 먼저 넣어야 해서 발생하는 문제라고 한다.

순서가 뒤바뀌면 확장 preset이 덮어쓰이지 못하고,
결과적으로 ESLint가 규칙을 제대로 로딩하지 못해 아무 규칙도 적용되지 않는 상태가 되기 때문이다.

 

✅ 해결

따라서 그냥 아래와 같은 순서로 바꿔주기만 하 바로 해결된다.

module.exports = [
  { ignores: [...] },

  // 확장 config 먼저
  js.configs.recommended,
  reactPlugin.configs.flat.recommended,
  eslintConfigPrettier,

  // 그다음에 내 규칙
  {
    files: ["**/*.{js,jsx}"],
    rules: { ... }
  }
];

 

참고로, Flat Config는 배열을 위에서 아래로 순차적으로 병합하기 때문에
이 순서를 지켜야 모든 규칙이 정상적으로 적용된다고 한다.

 

---

⬛ 최종 설정 파일

내가 사용 중인 설정은 다음과 같다.

(사용하다가 변경이 생길 수도 있는데, 그럼 추후 수정하러 오겠습니당 ,,🤧)

const js = require("@eslint/js");
const eslintConfigPrettier = require("eslint-config-prettier");
const reactPlugin = require("eslint-plugin-react");
const reactHooks = require("eslint-plugin-react-hooks");
const reactRefresh = require("eslint-plugin-react-refresh");
const globals = require("globals");

module.exports = [
  {
    settings: {
      react: {
        version: "19.1.0",
      },
    },

    ignores: [
      "node_modules",
      "dist",
      "build",
      "coverage",
      "android",
      "ios",
      ".expo",
      ".expo-shared",
    ],
  },

  js.configs.recommended,
  reactPlugin.configs.flat.recommended,
  eslintConfigPrettier,

  {
    files: ["**/*.{js,jsx}"],

    languageOptions: {
      ecmaVersion: 2020,
      sourceType: "module",
      globals: {
        ...globals.browser,
        ...globals.es2021,
        __DEV__: "readonly",
      },
    },

    plugins: {
      react: reactPlugin,
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },

    rules: {
      // 콘솔은 경고만
      "no-console": ["warn", { allow: ["warn", "error"] }],
      "no-debugger": "error",

      // 최신 React + RN에서 필요 없는 규칙 끄기
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",

      // react-hooks 추천 규칙 직접 추가
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",

      // react-refresh 기본 권장 규칙 직접 추가
      "react-refresh/only-export-components": "warn",

      // 안 쓰는 변수 경고 임시로 꺼둠
      // (개발 끝나면 다시 킬거니까 최대한 안 쓰게 하세요 !!)
      "no-unused-vars": "off",
    },
  },

  {
    files: ["babel.config.js"],
    languageOptions: {
      globals: {
        module: "readonly",
        require: "readonly",
      },
    },
    rules: {},
  },
];