React项目报Unexpected token错误，本地环境无法运行求助

问题分析 #

你遇到的语法错误是因为React Fragment短语法<>未被正确编译，同时代码和package.json里还存在拼写、配置错误。

解决步骤 #

1. 修复代码拼写错误

你导入的userState是拼写失误，正确写法是useState：

// 错误写法
import React,{userState,Component} from "react";

// 修正后
import React,{useState,Component} from "react";

2. 修正package.json的无效配置

你的package.json存在两处错误配置：

• presets字段直接放在根目录是无效的，babel配置需放在专属的babel块中；且react-scripts 5.x已内置@babel/preset-react，无需手动配置。
• type: "module"会和react-scripts默认的CommonJS配置冲突，非必要建议移除。

修改后的package.json：

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^5.0.0"
  },
  "main": "/index.js",
  "devDependencies": {}
}

3. 重新清理安装依赖（建议执行）

执行命令确保依赖环境干净：

# Windows系统
rmdir /s /q node_modules && del package-lock.json
# Mac/Linux系统
rm -rf node_modules package-lock.json

npm install

4. 重启开发服务

关闭当前运行的开发服务器，重新执行npm start，Fragment短语法即可正常编译。

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