8

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.com)

  • 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:

  1. create a fresh create-react-app project
  2. run yarn build
  3. yarn global add serve && serve -s build
  4. Use my LAN IP (not localhost) and type on url address browser http://<my-lan-ip>:5000 (5000 port as default port provided by serve command)

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:

  1. Old TV browsers doesn't support React?
  2. Or maybe is just a polyfill problem?
  3. 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.

marquesm91
  • 535
  • 6
  • 23

2 Answers2

5

Newer versions of React (v16+) require:

  • The Map and Set 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.

Joe Clay
  • 33,401
  • 4
  • 85
  • 85
  • If I install core-js package I have to eject the create-react-app application? – marquesm91 Apr 12 '18 at 14:20
  • @marquesm91: Not as far as I know! It should literally be as simple as doing `npm install core-js --save` and then following the example from the docs page I linked. Same deal with the RAF polyfill. – Joe Clay Apr 12 '18 at 14:24
  • I follow the docs and add in `index.js` the first two lines `import 'core-js/es6/map'` and `import 'core-js/es6/set'` and even further I added `import 'raf/polyfill'`. Plus, I run `yarn add core-js --dev` and `yarn add raf --dev`. I have generated the build ant yet still gets the same results: blank screen on TV :( – marquesm91 Apr 12 '18 at 14:32
  • Agh - then Rikin's suggestion of downloading Chrome 23 to your PC might be a decent one, unless you can figure out how to access the developer tools/Chrome remote debugging on your TV. – Joe Clay Apr 12 '18 at 14:34
  • I have search a way to see a developer tools remote on TV but haven't find any solution. I will follow Rikin's suggestion and later come up with a feedback – marquesm91 Apr 12 '18 at 14:36
  • Well, even if this answer doesn't end up being the solution, I wish you luck figuring out the issue :) – Joe Clay Apr 12 '18 at 14:48
  • 1
    I got it Joe, thank you so much. I will update the answer with the solution – marquesm91 Apr 12 '18 at 15:21
  • I tried this. It started working but my UI is not looking as expected. The same UI looks good on my laptop. Any suggestions? @marquesm91 – Yadynesh Desai Dec 19 '18 at 08:08
  • @YadyneshDesai I solved this CSS problem using `styled-components` because it resolves old css prefix for you. You could give it a try! – marquesm91 Dec 19 '18 at 10:48
  • @marquesm91 I have already created the css for this using bootstrap. Do I have to change everything? – Yadynesh Desai Dec 20 '18 at 10:57
1

If your desired aim is to have your app run just on a smart TV perhaps give react-tv a look: https://github.com/raphamorim/react-tv

Anthony O'Neill
  • 107
  • 7
  • Even if I want to, `react-tv` isn't a accepted solution because only supports LG's television. So will not attend me :( – marquesm91 Apr 12 '18 at 14:59