VS-code error "Parsing error: Cannot find module '@babel/plugin-syntax-import-assertions'" but npm start and linting works

Question

I am developing a REST API backend with express and I need to import some JSON local files, so I used the experimental assert { type: "json" } syntax.

ESLint still doesn't support it, the solution is to use babel parser for ESLint.

I added as dev dependencies:

"@babel/core": "^7.22.1",
"@babel/eslint-parser": "^7.21.8",
"@babel/plugin-syntax-import-assertions": "^7.20.0"

I added in .eslintconfi.json:

"parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "babelOptions": {
      "plugins": [
        "@babel/plugin-syntax-import-assertions"
      ]
    }
  },

The linting works just fine but VScode gives me Parsing error: Cannot find module '@babel/plugin-syntax-import-assertions error on every file:

@starball yes, packages works correctly, the problem is only vscode — Favo02, Jun 01 '23 at 08:42
did you follow the instructions here: https://babeljs.io/docs/editors#visual-studio-code ? — starball, Jun 01 '23 at 17:51

Favo02 · Answer 1 · 2023-06-02T00:02:05.417

0

The problem was opening multiple folders with eslint in the same workspace, both frontend and backend in my case. Opening only the backend the issue disappears.

To open both folders in the same workspace edit workspace settings (.vscode/settings.json file), adding:
{ "eslint.workingDirectories": ["frontend", "backend"] }

More here

edited Jun 02 '23 at 00:02

answered Jun 01 '23 at 23:55

Favo02

48
1
5

VS-code error "Parsing error: Cannot find module '@babel/plugin-syntax-import-assertions'" but npm start and linting works

1 Answers1