报错：无法找到@babel/preset-react模块，Sanity项目Schema文件语法异常

报错信息：Parsing error: Cannot find module '@babel/preset-react'
创建schema.js、tweetSchema.js、userSchema.js三个文件后，文件内的import、export语句下方均出现红色报错线。已手动安装@babel/preset-react，但问题未解决。

涉及文件代码： #

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'}],
    },
   ],
  },
 ],
}

package.json #

{
 "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"]
}

1. 补全Babel配置文件 #

在项目根目录创建babel.config.json（或.babelrc），明确声明使用的预设：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

让ESLint和Babel能正确识别预设模块，避免找不到的报错。

2. 调整ESLint配置 #

如果项目根目录没有.eslintrc.json，创建并添加以下内容：

{
  "extends": ["@sanity/eslint-config-studio"],
  "parserOptions": {
    "babelOptions": {
      "presets": ["@babel/preset-react"]
    }
  }
}

确保ESLint直接关联Babel预设，消除语法校验的红线。

3. 重置依赖缓存 #

执行以下命令清理依赖并重新安装，解决版本冲突或缓存问题：

rm -rf node_modules package-lock.json
npm install

4. 修复Sanity版本不兼容问题 #

注意到@sanity/base是v2版本，而sanity是v3版本，版本不匹配会导致解析逻辑混乱。统一升级到v3：

npm install @sanity/base@latest

或者如果要保留v2，降级sanity到对应版本：

npm install sanity@2.35.7

5. 优化TS配置适配React 18 #

修改tsconfig.json中的jsx选项为react-jsx：

"jsx": "react-jsx"

适配React 18的自动JSX转换规则，避免语法解析报错。

内容的提问来源于stack exchange，提问作者ANIRUDDH SHARMA