React项目执行npm run dev时出现Unexpected token `interface`错误排查求助

看起来你在把JS文件转TSX后，遇到了Node.js无法识别TypeScript语法的问题，这是因为你的开发环境没有正确配置来编译TSX文件。下面是一步步的排查和解决方法：

1. 修复开发脚本，让nodemon用ts-node处理TSX #

你的npm run dev目前只是调用nodemon，但nodemon默认不会自动用ts-node编译TypeScript/TSX代码，导致Node.js直接读取TSX文件时遇到interface这类TS专属语法就报错。

方案一：直接修改package.json的dev脚本 #

把dev脚本改成指定用ts-node执行你的入口文件（替换成你项目的实际入口路径，比如Sanity Studio的sanity.config.tsx）：

"scripts": {
  "build": "rimraf ./build && tsc",
  "dev": "nodemon --exec ts-node --files src/sanity.config.tsx",
  "start": "npm run build && node build/index.js"
}

注意：start脚本里的node build/index.tsx要改成node build/index.js，因为tsc编译后会生成JS文件，Node没法直接跑TSX。

方案二：创建nodemon.json配置文件 #

在项目根目录新建nodemon.json，配置监听的文件扩展名和执行命令：

{
  "watch": ["**/*.ts", "**/*.tsx"],
  "ext": "ts,tsx",
  "exec": "ts-node --files src/sanity.config.tsx"
}

然后package.json的dev脚本保持"dev": "nodemon"即可。

2. 调整tsconfig.json的关键配置 #

你的tsconfig里有几个配置可能导致编译失败：

• jsx选项：当前设置为preserve，这会保留JSX语法不编译，但Node.js和ts-node需要把JSX转成React.createElement调用。改成：

  "jsx": "react-jsx"
  

• isolatedModules选项：ts-node对isolatedModules: true的支持有限，建议暂时改成false来测试：

  "isolatedModules": false
  

• noEmit选项：这个设置为true没问题，因为ts-node是动态编译，不会生成文件，但如果后续build有问题，可以再调整。

修改后的tsconfig.json核心部分：

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "jsx": "react-jsx",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/components/2_Sidebar.tsx"],
  "exclude": ["node_modules"]
}

3. 确认文件和include范围 #

• 确保你的Sidebar文件确实是.tsx扩展名，而不是.js或.ts（JSX必须用.tsx扩展名才能被正确编译）。
• 检查tsconfig.json的include数组，确保包含了所有需要编译的TS/TSX文件，你已经加了**/*.tsx，这没问题。

4. 重新安装依赖（可选） #

如果以上步骤都没解决，可能是依赖缓存问题，尝试清理后重新安装：

rm -rf node_modules package-lock.json
npm install

完成这些步骤后，再运行npm run dev，应该就能正常编译TSX文件，不会再出现Unexpected token interface的错误了。

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