使用react-scripts start时React警告指向bundle.js，如何改为指向源JSX文件？

你遇到的问题是dev环境下React警告栈指向编译后的bundle.js而非源文件，但调试功能正常，这是因为警告的栈映射依赖完整的sourcemap配置，以下是解决步骤：

• 检查项目的sourcemap开关：查看package.json的scripts里，start命令有没有附带GENERATE_SOURCEMAP=false参数，有的话直接移除，确保dev环境生成sourcemap。
• 强制配置dev环境sourcemap：在项目根目录新建.env.development文件，写入GENERATE_SOURCEMAP=true，明确开启完整sourcemap生成。
• 清除缓存重启：执行npm start -- --reset-cache（用yarn的话是yarn start --reset-cache），清除webpack缓存后重新启动项目，避免旧的sourcemap干扰。
• 确认Chrome控制台设置：打开控制台的设置（右上角齿轮图标），在「Sources」选项下勾选「Enable JavaScript source maps」和「Enable CSS source maps」，确保浏览器启用sourcemap解析。

你的警告示例：

警告：你为表单字段提供了value属性但未提供onChange处理函数。这将渲染一个只读字段。如果该字段需要可变，请使用defaultValue。否则，请设置onChange或readOnly。
at input
at li
at ul
at TodosList (http://localhost:3000/static/js/bundle.js:430:5)
at section
at Main (http://localhost:3000/static/js/bundle.js:340:5)
at section
at App (http://localhost:3000/static/js/bundle.js:35:76)

完成以上配置后，重新触发警告就能看到栈信息指向对应的JSX源文件了。

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