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

Question

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

Is your project opensource, or proprietary? Basically what I want to know is if there is a place it can be viewed publically, or is it behind closed doors, company type stuff? — JΛYDΞV, Jun 10 '22 at 03:07
You know, this is probably being caused by the way ESLint cascades when it resolves. I will try to reproduce it. One thing you could try is explicitly declaring the root ESLint configuration. By setting `root: true` in your eslintrc file. It might be a long shot, but Its worth trying, it helps ESLint know not to look in any parent folders for the root config. — JΛYDΞV, Jun 10 '22 at 03:17
Thank you. It is a private project. One of the answers in the questions I linked to - `If this appears in VSCode with the fullstack approach (front and back as subfolders within your workspace), adjust eslint extensions configrations for your workspace as following...` ended up working for me. — Canovice, Jun 11 '22 at 19:24
Oh great! Despite not being able to collect a self posted bounty, you should still write your own answer. — JΛYDΞV, Jun 12 '22 at 02:18

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

0 Answers0