[RN] Parsing error - eslint

정선웅·2024년 12월 19일

어느날 갑자기
Parsing error: rquire() of ES Module
에러가 모든 컴포넌트 상단에서 발생하고 있었다. 작동하는데 이상은 없는데 거슬려서 검색을 해보니
babel-eslint이 deprecated 되어서 변경해주어야한다고 한다.

근데 나는 해당 모듈을 사용하고 있지 않아서 찾아보니

@react-native-community/eslint-config

3년전에 설치되었던 해당 모듈이 babel-eslint 를 사용하고 있었고 이걸 @babel/eslint-parser 로 교체를 해주어야한다고 한다

1. babel-eslint 완전 제거

npm uninstall babel-eslint

npm uninstall @react-native-community/eslint-config

두개 다 삭제를 완전히 해준다.

2. @babel/eslint-parser 다시 설치

npm install --save-dev eslint@8.17.0 @babel/eslint-parser@7.21.3

최신 Eslint 로 설치를 다시 해준다.

3. eslintrc.js 수정

module.exports = {
  root: true,
  parser: '@babel/eslint-parser', // Babel ESLint 파서를 명시적으로 사용
  parserOptions: {
    requireConfigFile: false, // Babel 설정 파일을 요구하지 않음
    babelOptions: {
      presets: ['@babel/preset-env', '@babel/preset-react'], // 필요한 Babel 프리셋 명시
    },
  },
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended', // 기본 ESLint 권장 규칙 사용
    'plugin:react/recommended', // React 관련 규칙 사용
  ],
  plugins: [
    'react', // React 관련 플러그인 활성화
    'react-hooks', // React Hooks 관련 플러그인 활성화
  ],
  rules: {
    // 프로젝트에 맞게 추가 규칙을 설정하세요
  },
};