React/redux 应用在 Safari 上呈现空白屏幕

Question

我在 React/redux 中构建了一个应用程序，它适用于我尝试过的所有浏览器，但 MacOS 上的 Safari 和 iPhone 上的任何浏览器。我没有收到任何错误，没有控制台消息，没有任何信息可以给我一些想法。它只在 Safari 中呈现标签并且屏幕是空白的。

http://podcast.exploration.io

你知道我该如何追踪这个问题吗？

谢谢

Answer 1

我发现了问题。它失败的主要原因是 'fetch' 功能......在 Safari 中不可用。我不确定为什么它不打印任何东西，但我怀疑，因为 'fetch' 在 try/catch.

中被调用

Answer 2

我也遇到了这个问题。当我使用 webpack 时，我添加以正确导入我在这篇文章之后：http://mts.io/2015/04/08/webpack-shims-polyfills/

Answer 3

我遇到了类似的问题。我的列表项会被渲染但不会被绘制。所以我可以在开发工具中看到它们，但它们都是 white/transparent。我尝试在列表项中添加 transform: translateZ(0)，它解决了问题。

Answer 4

如果您在一台设备上出现黑屏而在另一台设备上没有，请参阅

此外，如果您的代码在某处使用了 fetch，而您的浏览器不支持它，则可能会发生这种情况。

检查浏览器和 OS 支持：https://caniuse.com/#search=fetch

official Redux docs 说：

We use fetch API in the examples. It is a new API for making network requests that replaces XMLHttpRequest for most common needs. Because most browsers don't yet support it natively, we suggest that you use cross-fetch library:
// Do this in every file where you use `fetch` 
import fetch from 'cross-fetch' 
Internally, it uses whatwg-fetch polyfill on the client, and node-fetch on the server, so you won't need to change API calls if you change your app to be universal.

Be aware that any fetch polyfill assumes a Promise polyfill is already present. The easiest way to ensure you have a Promise polyfill is to enable Babel's ES6 polyfill in your entry point before any other code runs:
// Do this once before any other code in your app 
import 'babel-polyfill'

Answer 5

遇到了完全相同的问题。这是由于在正则表达式中使用了 lookbehind，Safari 似乎不支持。看到这个

Answer 6

我遇到了同样的问题，我开始意识到我必须更新 antd 和 @ant-design/charts 的版本并且它运行良好。

React/redux 应用在 Safari 上呈现空白屏幕

React/redux app renders blank screen on Safari

javascript

reactjs

redux

redux-saga

official Redux docs 说：