After updating from babel-eslint
to @babel/eslint-parser
, currently in VSCode (with multiple project folders all loaded at once, collectively in a parent folder that contains all projects), we are receiving the same problem for every file in our react project:
Per this post - Parsing error: Cannot find module '@babel/preset-react':
Maybe it'll help someone, I just had a similar problem which I solved. I happened to have VSCode opened in a fullstack project where front and back were separate folders. When I opened VSCode only in the front folder this error faded away. I guess a solution would be to make a shared node_modules folder or setup a workspace from front and back folders, I went with the 2nd option.
Can confirm that our full-stack project (React frontend, Node backend) is in one directory, and that loading only the frontend directory in VS code resolves the issue. However, we have a strong preference for loading multiple projects at once - a single high-level github-projects
directory of ours, that contains multiple different projects, into VSCode. We are seeking a solution that truly resolves the issue, rather than side-stepping the issue by only loading a single project folder with our React app.
Is there anyway to resolve this issue while still loading multiple projects into VSCode? I have attempted to install @babel/eslint-parser
globally however it did not resolve the issue.
Edit: our .babelrc file inside the react project. Presets commented out as including them / uncommenting it did not resolve the issue.
{
"env": {
"production": {
"plugins": ["transform-remove-console"]
// "presets": [
// "@babel/preset-react"
// ]
}
}
}
We've tried updating ecmaVersion
to 2022 in both .eslistrc files, with no luck. We've also tried installing @babel/eslint-parser
in both FE and BE projects, with no luck resolving issue.
.eslintrc in parent-dir/client
for react app:
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals": {
"nconf": true
},
// "parser": "babel-eslint",
"parser": "@babel/eslint-parser",
"plugins": ["react"],
"parserOptions": {
"ecmaVersion": 2022,
"requireConfigFile": false,
"sourceType": "module",
"ecmaFeatures": {
...
.eslintrc in parent-dir/server
for node app:
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals": {
"nconf": true
},
"parser": "@babel/eslint-parser",
// "parser": "babel-eslint",
"plugins": ["react"],
"parserOptions": {
"ecmaVersion": 2022,
"sourceType": "module",
"ecmaFeatures": {
...