I am getting this error Parsing error: Cannot find module '@babel/preset-react'

Question

I am getting this error parsing error: Cannot find module '@babel/preset-react'. After creating schema.js, tweetSchema.js, userSchema.js I got redline under import, export and export from all the 3 files.

schema.js:

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'

import {userSchema} from './userSchema'
import {tweetSchema} from './tweetSchema'

export default createSchema({
 name: 'default',
 types: schemaTypes.concat([userSchema, tweetSchema]),
})

tweetSchema.js:

export const tweetSchema = {
 name: 'tweets',
 type: 'document',
 title: 'Tweets',
 fields: [
  {
   name: 'tweet',
   type: 'string',
   title: 'Tweet',
  },
 ],
}

userSchema.js:

export const userSchema = {
 name: 'users',
 type: 'document',
 title: 'Users',
 fields: [
  {
   name: 'coverImage',
   type: 'string',
   title: 'Cover Image',
  },
  {
   name: 'tweets',
   title: 'Tweets',
   type: 'array',
   of: [
    {
     type: 'reference',
     to: [{type: 'tweets'}],
    },
   ],
  },
 ],
}

this is my package.json file:

{
 "name": "twiiter-clone",
 "private": true,
 "version": "1.0.0",
 "main": "package.json",
 "license": "UNLICENSED",
 "scripts": {
  "dev": "sanity dev",
  "start": "sanity start",
  "build": "sanity build",
  "deploy": "sanity deploy",
  "deploy-graphql": "sanity graphql deploy"
 },
 "keywords": ["sanity"],
 "dependencies": {
  "@sanity/base": "^2.35.7",
  "@sanity/schema": "^3.8.3",
  "@sanity/types": "^3.8.3",
  "@sanity/validation": "^3.8.3",
  "@sanity/vision": "^3.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-is": "^18.2.0",
  "sanity": "^3.0.0",
  "sanity-typed-schema-builder": "^2.1.1",
  "styled-components": "^5.2.0"
 },
 "devDependencies": {
  "@babel/cli": "^7.21.0",
  "@babel/core": "^7.21.4",
  "@babel/preset-env": "^7.21.4",
  "@babel/preset-react": "^7.18.6",
  "@sanity/eslint-config-studio": "^2.0.1",
  "@types/react": "^18.0.25",
  "@types/styled-components": "^5.1.26",
  "babel-preset-react-app": "*",
  "eslint": "^8.6.0",
  "prettier": "^2.8.7",
  "typescript": "^4.0.0"
 },
 "prettier": {
  "semi": false,
  "printWidth": 100,
  "bracketSpacing": false,
  "singleQuote": true
 }
}

tsconfig.json:

{
 "compilerOptions": {
  "target": "ES2017",
  "lib": ["dom", "dom.iterable", "esnext"],
  "allowJs": true,
  "skipLibCheck": true,
  "strict": true,
  "forceConsistentCasingInFileNames": true,
  "noEmit": true,
  "esModuleInterop": true,
  "module": "esnext",
  "moduleResolution": "node",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "jsx": "preserve",
  "incremental": true
 },
 "include": [
  "**/*.ts",
  "**/*.tsx",
  "schemas/schema.js",
  "schemas/tweetSchema.js",
  "schemas/userSchema.js"
 ],
 "exclude": ["node_modules"]
}

I tried to install @babel/preset-react but it did not work.

score 0 · Answer 1 · answered Apr 18 '23 at 08:38

This could be a linter issue. Did you open your project-folder directly? In your file-editor or did you open it from a parent folder? I've seen similar issues when opening a Next.js project from a parent folder. Try opening your project-folder directly.

score 0 · Answer 2 · answered Jun 02 '23 at 00:31

Like @Jelmer said the problem probably is opening multiple folders in the same workspace.

Separating the linter if you have multiple folders open at the same time (like a backend and a frontend) in the workspace settings (.vscode/settings.json) could be the solution:
{ "eslint.workingDirectories": ["frontend", "backend"] }

More here

I am getting this error Parsing error: Cannot find module '@babel/preset-react'

2 Answers2