React项目运行报错：SyntaxError: Unexpected token '<' 求助

这个错误的核心原因是Node或打包工具没有正确识别JSX语法，把HTML标签当成了非法的JavaScript语法。针对你的情况，按以下步骤逐一排查：

1. 检查Babel配置完整性 #

• 确认项目已安装必要的Babel依赖：@babel/core、@babel/preset-react、babel-loader（使用Webpack时）
• 根目录需存在.babelrc或babel.config.json文件，配置React预设：

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

2. 验证Webpack配置（使用Webpack时） #

• 检查webpack.config.js中的模块规则，确保.js/.jsx文件通过babel-loader处理：

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
  

• 确认入口文件后缀是.jsx（若App.js为入口文件），或者Webpack配置允许解析.js中的JSX语法。

3. 核对package.json的启动脚本 #

• 如果是create-react-app创建的项目，确保启动脚本为react-scripts start；自定义Webpack的话，脚本需正确调用Webpack开发服务器：

  "scripts": {
    "start": "webpack serve --mode development"
  }
  

• 禁止直接用node App.js运行项目，Node本身无法识别JSX，必须通过打包工具转译后再运行。

4. 检查文件扩展名与导入导出规范 #

• 若App.js扩展名是.js，需确保配置允许解析其中的JSX；或改为.jsx，同时导入路径要对应（比如import App from './App.jsx'）
• 确认组件导出正确，比如App组件需写成：

  export default function App() {
    return <div className="app">...</div>;
  }
  

5. 清除缓存并重装依赖 #

• 删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 若使用create-react-app，可通过npm start -- --reset-cache清理打包缓存。

内容的提问来源于stack exchange，提问作者üsame bahadır