Parsing error: cannot find module '@babel/preset-react' when loading multiple projects into VSCode at once

1.2k Views Asked by At

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:

enter image description here

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": {
        ...
0

There are 0 best solutions below