React Native Expo Web项目部署AWS后，部分浏览器直接访问DeepLink报Minified React error #300求助

这种情况确实挺闹心的——明明本地跑、开发构建都没问题，一部署到S3+CloudFront就出状况，还只在部分浏览器里发作，Firefox还偏偏正常，换谁都会懵圈😅

先给你拆解下这个错误：Minified React error #300对应的核心问题，大多是页面里加载了多份React/ReactDOM实例，或者版本不匹配。但结合你的场景来看，根源大概率出在AWS的部署配置上，毕竟只有直接访问DeepLink才触发，从首页跳转就完全正常。

给你几个排查和解决的方向，按优先级来：

• 先搞定SPA的路由 fallback 配置
  S3静态网站托管默认认死理，你直接访问/chat，它就会去找这个路径下的文件或文件夹，找不到就返回404。而Expo Web是单页应用，所有路由都得靠首页的index.html来处理。
  你需要做两步：

  1. 到S3桶的静态网站托管设置里，把「错误文档」也设为index.html；
  2. 去CloudFront的行为配置中，添加错误页面规则：把404和403状态码都重定向到/index.html，状态码改成200。这样不管访问哪个子路径，CloudFront都会返回首页内容，交给客户端路由处理。

• 检查Expo构建的资源路径配置
  如果构建时没指定正确的publicPath，直接访问/chat时，页面会用相对路径加载js、css资源，比如本该从/static/js/xxx.js加载，结果变成了/chat/static/js/xxx.js，这时候要么资源加载失败，要么误加载多份React实例。
  你可以在expo.config.js里加个配置：

  export default {
    // 其他配置...
    web: {
      publicPath: '/',
    },
  };
  

  重新构建部署后再测试。

• 排查CloudFront的缓存问题
  有时候CloudFront的缓存策略会搞事：不同路径的资源缓存版本不一致，直接访问/chat时加载了旧的资源，和首页的React版本冲突，就会触发这个错误。
  你可以先试试手动清空CloudFront的缓存，然后重新测试；另外确保Expo构建出来的资源文件名都带哈希（Expo默认会加），这样不同版本的资源不会被缓存混淆。

• 用开发者工具抓资源加载情况
  在出问题的浏览器里直接访问/chat，打开开发者工具的「网络」面板，看所有js、css资源的加载路径对不对，有没有加载失败的，或者重复加载了React相关的文件。如果看到路径里带了/chat前缀，那就是刚才说的publicPath配置问题无疑了。

先从第一个方向开始排查吧，这是S3+CloudFront部署SPA最容易踩的坑，大概率能解决你的问题！

内容来源于stack exchange