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!
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!