11

I'm new to working with Sanity, and just set up a project. Everything is working fine, however, in Visual Studio Code, I keep getting a parsing error that won't disappear, and I'm wondering how I can fix it.

Parsing error: Cannot find module '@babel/preset-env'

I've tried deleting the node_modules and re-running sanity install, I've also tried using npm install to install @babel/core and @babel/preset-env. Nothing seems to have fixed the problem so far.

Any suggestions? I want to start using Sanity with my team at work, but having this error is really quite annoying (as everything is underlined in red).

Jon Lothar
  • 186
  • 1
  • 7

3 Answers3

19

I was having a similar issue. For me, the issue was related to the way VS Code deals with a project containing multiple ESLint working directories (common in monorepos).

For example

Project
   |--- /web
   |--- /studio

In my project root, edit (or create) ./.vscode/settings.json to include my ESLint projects. NB: these settings only apply to your current workspace.

"eslint.workingDirectories": ["./web", "./studio"]

Hope that helps :-)

Bryan Hickey
  • 315
  • 1
  • 5
5

Method 1:

Create a file called .babelrc in your root directory and add this code

    {
      "presets": ["next/babel"],
      "plugins": []
    }

And in .eslintrc replace the existing code with

    {
      "extends": ["next/babel"]
    }

Method 2:

You need to install npm with this command:

npm install --save-dev @babel/core @babel/preset-env

         or


npm install --save-dev @babel/core

I hope this will solve your problem.

abel
  • 101
  • 3
  • 2
2

You can simply edit(or create) a file in your project root called .eslintrc ./.eslintrc and add this code:

{
  "extends": "@sanity/eslint-config-studio",
  "eslint.workingDirectories": ["./web", "./studio"]
}

To solve this issue you can just be setting a working directory for your project. It's a major improvement in eslint version 2.0.4.

Sometimes, need to customize the working directories via eslint.workingDirectories can now use glob patterns instead of listing every project folder. For example, { "pattern": "code-*" } will match all project folders starting with code-. In addition, the extension now changes the working directory by default.

You can also explore the eslint doc: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Akash Das
  • 41
  • 7