使用create-react-app创建React应用，报错指向bundle.js而非源文件的原因

以下是几个常见原因及对应的排查方向：

• 生产模式调试限制
  Create React App在生产构建（npm run build）时，默认生成的source map是独立文件且浏览器不会自动优先解析，适合事后排查而非实时调试。你应该用开发模式（npm start）调试，开发模式默认启用eval-source-map，能直接映射到App.js这类源文件。

• Webpack配置修改未生效
  如果已经eject暴露了配置文件，检查webpack.config.js里的devtool字段：

  • 开发环境要设为devtool: 'eval-source-map'
  • 生产环境设为devtool: 'source-map'
    如果没eject就直接改了不存在的webpack.config.js，那肯定没用——未eject的项目得用react-app-rewired或craco这类工具覆盖配置，且要确保配置格式正确。

• 浏览器DevTools设置禁用了Source Map
  打开浏览器开发者工具，找到设置（齿轮图标），确认勾选了"Enable JavaScript source maps"和"Enable CSS source maps"。没开的话，浏览器不会解析source map，只会显示bundle.js的代码。

• 缓存干扰
  浏览器缓存了旧的bundle和source map文件，导致新的映射没生效。强制刷新页面（Ctrl+Shift+R）或者清除浏览器缓存后重新加载应用试试。

• 第三方依赖冲突
  近期安装的babel插件、代码压缩工具等第三方依赖，可能破坏了source map的生成逻辑。暂时移除这些依赖，重新启动项目，看问题是否消失。

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