使用create-react-app创建React应用启动报错，求解决找不到react-app预设问题

错误含义 #

这个错误的意思很明确：webpack在尝试编译你的React项目时，找不到名为react-app的Babel预设（preset）。

react-app是create-react-app内置的一套Babel配置集合，专门用来处理React代码的转译、JSX语法解析等工作——正常情况下，create-react-app会自动帮你配置好这个预设，不需要手动设置。出现这个错误，大概率是你的项目依赖安装不完整、node_modules目录损坏，或者你手动修改了项目的Babel配置导致内置预设失效了。

解决步骤 #

我给你整理了几个按优先级尝试的解决方法：

• 第一步：清理并重新安装依赖
  这是最常见的解决办法，毕竟你提到加载webpack-dev-server时多个依赖未完成安装，说明依赖确实存在问题。执行以下命令：

  1. 删除node_modules目录和锁文件：

     # Mac/Linux
     rm -rf node_modules package-lock.json
     # Windows 命令提示符
     rmdir /s /q node_modules && del package-lock.json
     # Windows PowerShell
     Remove-Item -Recurse -Force node_modules; Remove-Item package-lock.json
     

  2. 重新安装所有依赖：

     npm install
     

• 第二步：检查并移除自定义Babel配置
  如果你手动创建过.babelrc、babel.config.json这类Babel配置文件，create-react-app的内置配置会被覆盖，导致找不到react-app预设。直接删除这些自定义配置文件，然后重新运行npm run start试试。

• 第三步：清除npm缓存（如果前两步无效）
  有时候npm缓存损坏也会导致依赖安装异常，执行以下命令清除缓存后再重新安装：

  npm cache clean --force
  npm install
  

• 极端情况：重新初始化项目
  如果以上方法都没用，可能是项目初始化过程中出现了不可逆的损坏，你可以备份好自己的代码后，重新用create-react-app创建项目，再把代码迁移过去：

  npx create-react-app my-new-app
  

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