如何在React中查看源码组件的错误而非bundle.js中的错误？

你的React应用报错时，错误信息只指向打包后的bundle.js文件，找不到原始组件的源码行，这是因为源码映射（source maps）未正常工作。结合你提供的package.json配置（使用react-scripts 5.0.1），可按以下步骤排查：

• 确保运行开发环境：你当前用npm start启动的是开发服务，这一步是对的——react-scripts start默认会自动生成源码映射。不要直接运行生产构建的build文件夹内容，生产环境默认不会暴露原始源码信息。

• 检查是否禁用了源码映射：查看项目根目录的.env文件（没有就新建），确认没有设置DISABLE_SOURCE_MAPS=true。如果有这个配置，删掉或者改成false，然后重启服务。

• 清除缓存：缓存文件可能导致源码映射失效，执行命令清除缓存后重启：

  npm start -- --reset-cache
  

  也可以手动删除node_modules/.cache文件夹。

• 检查浏览器DevTools设置：

  1. 打开浏览器开发者工具（按F12）
  2. 点击右上角齿轮图标进入设置
  3. 在「Sources」分类下，确保「Enable JavaScript source maps」和「Enable CSS source maps」都已勾选

• 更新react-scripts：如果以上都没用，尝试把react-scripts更到最新版本：

  npm install react-scripts@latest
  

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