admin管理员组文章数量:1327524
I am facing a big problem with create-react-app
environment on trying to run my application inside a Smart TV browser.
Specification TV and browser ()
- TV: Panasonic TC-32DS600B
- Browser: 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
Here is what I am trying to:
- create a fresh
create-react-app
project - run
yarn build
yarn global add serve && serve -s build
- Use my LAN IP (not localhost) and type on url address browser
http://<my-lan-ip>:5000
(5000 port as default port provided byserve
mand)
When I follow these steps I get a blank page. The blank page only occours in a TV browser. On PC and Mobile runs fine.
So I am wondering and ask here to have some share thoughts:
- Old TV browsers doesn't support React?
- Or maybe is just a polyfill problem?
- Or it doesn't support HTML5, CSS3?
Anyone have already face this problem? Any solution or No, it is not possible?
EDITED: Solution
Thanks to @Rikin and @JoeClay I came up with a solution. First, after download the Chrome version 23, I could see the problem is polyfills (Set and Map).
So after install yarn add core-js --dev
and yarn add raf --dev
.
Update 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();
Also, the portion of React Docs which helped to find this solution.
I am facing a big problem with create-react-app
environment on trying to run my application inside a Smart TV browser.
Specification TV and browser (http://whatismybrowser.)
- TV: Panasonic TC-32DS600B
- Browser: 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
Here is what I am trying to:
- create a fresh
create-react-app
project - run
yarn build
yarn global add serve && serve -s build
- Use my LAN IP (not localhost) and type on url address browser
http://<my-lan-ip>:5000
(5000 port as default port provided byserve
mand)
When I follow these steps I get a blank page. The blank page only occours in a TV browser. On PC and Mobile runs fine.
So I am wondering and ask here to have some share thoughts:
- Old TV browsers doesn't support React?
- Or maybe is just a polyfill problem?
- Or it doesn't support HTML5, CSS3?
Anyone have already face this problem? Any solution or No, it is not possible?
EDITED: Solution
Thanks to @Rikin and @JoeClay I came up with a solution. First, after download the Chrome version 23, I could see the problem is polyfills (Set and Map).
So after install yarn add core-js --dev
and yarn add raf --dev
.
Update 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();
Also, the portion of React Docs which helped to find this solution.
Share Improve this question edited Apr 12, 2018 at 15:29 marquesm91 asked Apr 12, 2018 at 12:41 marquesm91marquesm91 5557 silver badges24 bronze badges 6- It might be helpful to know which make/model of TV you're trying to run it on. – Joe Clay Commented Apr 12, 2018 at 13:31
- @JoeClay updated. I have forgot to provided these infos. – marquesm91 Commented Apr 12, 2018 at 13:46
- Probably download older desired Chrome version: oldapps./google_chrome.php and work on that in local and see if its successful. Remember its not React running in browser rather JS running in the browser. – Rikin Commented Apr 12, 2018 at 13:53
- @Rikin yes, you are right. JS running in the browser :) – marquesm91 Commented Apr 12, 2018 at 14:00
- 1 Thanks, man, saved my day! – kenshinji Commented Feb 22, 2019 at 8:13
2 Answers
Reset to default 5Newer versions of React (v16+) require:
- The
Map
andSet
data structures - The
window.requestAnimationFrame()
API
According to MDN, basic Map and Set support weren't added to Chrome until version 38, and you had to use a vendor prefix to access requestAnimationFrame
until Chrome 24.
Since your TV uses Chrome 23, you'll need to polyfill those APIs. The React docs suggest using core-js
or babel-polyfill
for this purpose.
If your desired aim is to have your app run just on a smart TV perhaps give react-tv
a look: https://github./raphamorim/react-tv
本文标签: javascriptcreatereactapp running on Smart TV browserStack Overflow
版权声明:本文标题:javascript - create-react-app running on Smart TV browser - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742172344a2426949.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论