Lint 解析错误：找不到模块“babel.config.js”

Question

I am updating the react version (16 to 17.0.2) of a web application and I had to update some dependencies too.

Currently, my application is compiling and running however, when I run the eslint it breaks with the following message:

error Parsing error: Cannot find module 'babel.config.js'

My .eslintrc is configured like:

...
"parser": "@babel/eslint-parser",
  "parserOptions": {
    "babelOptions": {      
      "configFile": "babel.config.js"
    }
  },
...

My babel.config.js is:

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
    "react-app"
  ],
  plugins: ["@babel/plugin-syntax-class-properties","@babel/plugin-proposal-class-properties"]
};

Some dependencies are:

 "@babel/core": "^7.17.9",
 "@babel/eslint-parser": "^7.17.0",
 "babel-eslint": "10.0.3",
 "eslint": "7.5.0",
 "eslint-config-airbnb": "^18.0.1",
 "eslint-config-angular": "^0.5.0",
 "eslint-config-react-app": "^5.1.0",
 "eslint-import-resolver-babel-module": "^5.1.0",
 "eslint-import-resolver-webpack": "^0.12.2",
 "eslint-loader": "4.0.2",
 "eslint-plugin-angular": "^4.0.1",
 "eslint-plugin-flowtype": "5.2.0",
 "eslint-plugin-import": "2.22.0",
 "eslint-plugin-jsx-a11y": "6.3.1",
 "eslint-plugin-react": "7.20.3",
 "eslint-plugin-react-hooks": "^4.0.8",
 "eslint-webpack-plugin": "^3.1.1",
 "react": "17.0.2",
 "react-dom": "17.0.2",
 "react-scripts": "3.4.4",
 "terser-webpack-plugin": "2.2.1",
 "ts-pnp": "1.1.5",
 "url-loader": "2.3.0",
 "webpack": "4.41.2",
 "webpack-dev-server": "3.9.0",
 "webpack-manifest-plugin": "2.2.0",
 "workbox-webpack-plugin": "4.3.1"

Does anyone have been through and solved it? Thanks!

Answer 1

I couldn't find an answer to this question however, I found a workaround:

You can add the babel configuration on the.eslintrc body and instruct it to not look for the babel.config file, like:

You should add the config inside babelOptions.

"parser": "@babel/eslint-parser",
"parserOptions": {
  "requireConfigFile": false, //Add this line
  "babelOptions": {      
    // "configFile": "babel.config.js" //When linting it only works with absolute path
    // Here starts the configuration
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "react-app"
      ],
      "plugins": ["@babel/plugin-syntax-class-properties","@babel/plugin-proposal-class-properties"]
    // Here ends the configuration
    }
  },

It is not the ideal solution, but it works!