React应用加载抛出'Uncaught SyntaxError: Unexpected token '<''错，无痕窗口运行正常

• 核心故障链路：对 /static/js/main.[hash].js 的静态资源请求，预期返回JS脚本资源，实际响应被兜底返回了HTML页面，直接触发白屏、应用完全无法加载的问题
• 场景复现矛盾特征：
  • 无痕窗口访问时应用可全流程正常运行
  • 普通窗口执行清缓存+硬刷新操作后，仅能成功加载1次，刷新后立刻复现白屏故障
  • 开发者工具Network面板对比发现：无痕窗口的正常场景下，HTML内容是通过 /null 端点获取的，响应内容和故障场景下兜底返回给JS请求的HTML完全一致，但该场景下资源加载流程无异常
• 构建产物的异常特征：
  • 执行 yarn build 后本地部署产物，控制台会抛出相同的"JS返回HTML"报错，但应用本身可正常加载，无白屏
  • 本地构建生成的HTML中存在 <script src="undefined"></script> 异常标签
  • 生产环境故障版本的HTML中，对应脚本标签是格式正常的 <script type="text/javascript" src="/static/js/main.ff34f559.js"></script>
• 排查卡点：此前试过网上同类报错的通用解决方案均未生效，最初设想通过调整资源请求的MIME类型兼容逻辑修复问题，但由于刚完成CRA eject弹出操作，对Webpack全链路的资源输出、注入配置不熟悉，找不到对应请求的配置修改入口。

1. 优先定位src="undefined"脚本标签的生成源头 #

这是CRA eject后最高发的配置错位问题，所有相关配置入口都在eject后生成的config目录下：

• 检查config/paths.js中的publicUrl取值逻辑：如果代码中直接读取未赋值的PUBLIC_URL环境变量拼接静态路径、没有做空值兜底，会在HtmlWebpackPlugin注入脚本标签时生成src="undefined"的错误标签
• 核对config/webpack.config.js中Webpack实例的output.publicPath配置：
  • 禁止将该值设置为'auto'、空字符串或undefined，需要根据实际部署路径显式赋值：如果应用部署在域名根目录，配置值为'/'；如果部署在子路径下，配置值为'/对应子路径/'
  • 该配置取值异常时，不仅会生成路径错误的脚本标签，还会连带导致静态资源请求路径拼接错误，触发后续的兜底逻辑问题
• 同步检查HtmlWebpackPlugin的配置项，确认是否正确从Webpack的output配置中读取publicPath参数，避免参数传递断层。

2. 修复静态资源请求被兜底返回HTML的路由错位问题 #

这是触发白屏的直接原因：

• 这类报错的本质是部署侧的单页应用路由兜底规则，优先级高于静态资源目录的匹配规则，导致对/static/开头的JS文件请求，被错当成前端路由路径处理，直接返回了根目录的index.html
• 调整部署侧（Nginx、Node静态服务、网关等所有托管层）的规则优先级：必须将/static/开头的静态资源请求匹配逻辑，放在所有SPA路由兜底规则之前，可以通过配置匹配优先级、或者单独为/static/路径设置静态资源返回规则实现，确保这类请求不会进入HTML返回分支
• 对应观察到的"无痕正常、普通窗口硬刷新加载一次就坏"的特征，本质是浏览器缓存了首次加载的旧HTML，后续请求新hash命名的JS资源时，因为服务端规则错位返回了HTML，浏览器因MIME类型不匹配拦截响应，直接触发白屏。

3. 定位/null端点返回HTML的异常逻辑 #

这个现象本身就是publicPath配置异常的直接佐证：

• 当Webpack输出的页面base路径取值为null时，会直接生成指向/null的请求路径，触发服务端兜底返回HTML
• 最初设想的"调整请求使其可接受HTML或JSX资源"的修复思路方向存在偏差：浏览器拦截这类响应不是因为不兼容MIME类型，是静态资源和路由兜底的匹配规则错位导致的错误响应。

4. 针对eject后的特殊配置补漏 #

• 检查config/webpackDevServer.config.js中的historyApiFallback配置，确认是否开启了disableDotRule参数：如果未开启，路径中带点的资源（比如main.ff34f559.js的文件名带点）会被错误判定为非文件路由，触发兜底返回HTML的逻辑
• 解释本地部署时同报错但不白屏的现象：本地环境下undefined的脚本标签加载失败后，后续正常hash命名的JS脚本加载成功，应用可正常运行，但控制台会保留"MIME类型不匹配"的报错，这个报错的根源同样和publicPath配置错位、服务端兜底规则优先级异常直接相关。

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