运行React项目时App.js首行import React报SyntaxError，已排查依赖与VS Code

可能的原因及解决方案 #

1. 检查React版本兼容性 #

• React 17+ 已不需要手动导入React，但保留import React from 'react'也不会报错。如果是旧版本React搭配新打包工具，可能出现兼容问题。
• 查看当前React版本：

  npm list react
  

• 升级到稳定版：

  npm install react@latest react-dom@latest
  

2. 确认Babel/打包工具配置 #

• 确保Babel配置文件（babel.config.json或.babelrc）正确引入React预设：

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

• 用Create React App的话，若修改过默认配置导致异常，可重置依赖：

  npm install --save-dev react-scripts@latest
  

3. 检查文件编码格式 #

• VS Code右下角查看App.js编码，确保是UTF-8。若不是，点击编码选择「通过编码保存」，选UTF-8重新保存文件。

4. 清理缓存并重装依赖 #

• 清理缓存、删除旧依赖后重新安装：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  npm start
  

• Create React App可直接用内置清理命令：

  npm run clean
  

5. 移除项目路径中的特殊字符 #

• 你的项目路径包含空格（Dell i7），部分打包工具对带空格的路径支持不佳。建议将项目移到无空格、无特殊字符的目录，比如c:\react-projects\react-category-v1。

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