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

Question

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

规格电视和浏览器(http://whatismybrowser.com)

电视：松下 TC-32DS600B
浏览器：Chrome 23 FreeBSD
userAgent: Mozilla/5.0 (X11;FreeBSD;U;Viera:pt-BR) AppleWebKit/537.11 (KHTML, like Gecko) Viera/3.18.1 Chrome/23.0.1271.97 Safari/537.11

这是我正在尝试的：

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

当我按照这些步骤操作时，我得到了一个空白页面。空白页面只出现在电视浏览器中。在 PC 和移动设备上运行没问题。

所以我想知道并请在这里分享一些想法：

旧电视浏览器不支持 React？
或者可能只是 polyfill 问题？
或者不支持HTML5,CSS3?

有人遇到过这个问题吗？任何解决方案或不，这是不可能的？

已编辑：解决方案

感谢@Rikin 和@JoeClay，我想出了一个解决方案。首先，下载 Chrome 版本 23 后，我发现问题是 polyfills (Set and 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() API

根据 MDN，基本 Map and Set support weren't added to Chrome until version 38, and you had to use a vendor prefix to access requestAnimationFrame 直到 Chrome 24。

由于您的电视使用 Chrome 23，因此您需要填充那些 API。 React docs suggest using core-js or babel-polyfill 用于此目的。

Answer 2

如果您的目标是让您的应用程序运行只是在智能电视上，也许 react-tv 看看：https://github.com/raphamorim/react-tv

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

create-react-app running on Smart TV browser

javascript

browser

television

reactjs

create-react-app

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

create-react-app running on Smart TV browser

javascript

browser

television

reactjs

create-react-app

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