Have you tried running a packaged React JS app in Android, iOS, LG webOS, or Samsung Tizen and found that it's just showing a blank screen?
What's happening here?
It might be because of the following 4reasons
- Browser support
- Missing Polyfill
- Home page root
- BrowserRouter instead of HashRouter
Let's see each one by one
Browser Support
The React JS projects are expected to be hosted and run on modern browsers. But when you package it, it is expected to run on a fixed WebKit. And most of the time these WebKits are pretty old.
How old? well if you are working on a Smart TV app then for LG 2016 TV it will be on Chrome 38 (the current Chrome WebKit version is 86). So you need to have the build support for chrome version from 38. Better to check for the webkit version on your device before setting this value.
To fix this, add “chrome >= 38” to the production browserList in package.json
Missing Polyfill
The create-react app includes no polyfills by default. So there will be missing functions that will break your app on the older webkits.
Install react-app-polyfill and add import for its stable version as the first line in your index.js file.
Home page root
By default, Create React App produces a build assuming your app is hosted at the server root. But incase of packaged app this root might not the same for index.html file.
Add “homepage”: “.” in package.json to have the assets served relative to index.html
BrowserRouter instead of HashRouter
For navigation in hosted web apps using react we use BrowserRouter. This works by parsing the window.location.pathname. This works fine in hosted environment, but incase of packaged environment the pathname differes as it will mostly begin with ‘file:///’.
So we use HashRouter instead of BrowserRouter which uses window.location.hash
Apply above fixes to your code, build it, package it and run it on the device and let me know how it went in the comments below :)
