在智能电视浏览器上运行的create-react-app

Question

我create-react-app在尝试在智能电视浏览器中运行应用程序时遇到了一个环境大问题。

规格电视和浏览器（http://whatismybrowser.com）

• 电视：Panasonic TC-32DS600B
• 浏览器：Chrome 23 FreeBSD
• userAgent：Mozilla / 5.0（X11; FreeBSD; U; Viera：pt-BR）AppleWebKit / 537.11（KHTML，例如Gecko）Viera / 3.18.1 Chrome / 23.0.1271.97 Safari / 537.11

这是我想要的：

1. 创建一个新create-react-app项目
2. 跑 yarn build
3. yarn global add serve && serve -s build
4. 使用我的LAN IP（不是本地主机）并在URL地址浏览器上键入http://<my-lan-ip>:5000（5000端口为serve命令提供的默认端口）

当我按照这些步骤操作时，我会得到一个空白页。空白页仅在电视浏览器中出现。在PC和Mobile上运行正常。

因此，我想知道并要求在这里分享一些想法：

1. 旧的电视浏览器不支持React？
2. 还是仅仅是polyfill问题？
3. 还是不支持HTML5，CSS3？

有人已经遇到这个问题了吗？有什么解决办法还是不行，不可能吗？

编辑：解决方案

感谢@Rikin和@JoeClay我提出了一个解决方案。首先，下载Chrome 23版之后，我可以看到问题是polyfills（Set和Map）。

因此，安装后yarn add core-js --dev和yarn add raf --dev。

更新src / index.js

import 'core-js/es6/map'; // <-- added this line after installed packages
import 'core-js/es6/set'; // <-- added this line after installed packages
import 'raf/polyfill'; // <-- added this line after installed packages

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

另外，React Docs的一部分有助于找到该解决方案。

Answer 1

较新版本的 React (v16+) 需要：

• 该Map和Set数据结构
• 应用程序window.requestAnimationFrame()接口

根据 MDN，基本的Map和Set支持直到 38 版才添加到 Chrome，并且您必须使用供应商前缀才能访问requestAnimationFrameChrome 24。

由于您的电视使用 Chrome 23，因此您需要对这些 API 进行 polyfill。该阵营的文档建议使用core-js或 babel-polyfill用于此目的。