i made an application with react, it works fine in chrome but when i try to run it with a browser that has a kiosk option, i get "Uncaught ReferenceError: Map is not defined".
i tried the solution provided in the documentation but still no success, so i made another application just for test and i got this error : "SyntaxError: Use of const in strict mode".
first project created with "react": "^16.8.6",
second project created with "react": "^16.9.0",
device is Samsung Galaxy Tab E.
browser is kiosk browser lockdown :
https://play.google.com/store/apps/details?id=com.procoit.kioskbrowser&hl=en
this is the solution i've tried but didn't work : https://reactjs.org/docs/javascript-environment-requirements.html
Related
I have following problem: I added react router to my create-react-app, since I have to use gyroscope api I wanted to test my changes on mobile device. I am accessing app on mobile via local network and it renders blank page. At first I thought that there is a network issue but app works correctly when router is not used.
I tried both BrowserRouter and HashRouter but it didn't help. Here is console error:
console errors
since it is not very descriptive I tried wrapping up render into try catch block:
trycatch block
but error message remains the same.
"react-router-dom": "^6.4.3"
"react": "^18.2.0",
"react-dom": "^18.2.0"
Do you guys have any idea what is going on? I will be extremely grateful for help.
I am working on an application and I recently upgraded it to 67.4 from 66.4. I applied all the changes as suggested by the upgrade helper, but when I run the app the application seems to be frozen. As per my understanding I am navigating from a fallback view to the home screen. But I believe that particular code is not running. Could it be possible that react navigation is causing some issue here. I have tested that the control does reach the code block where the navigation is supposed to happen but it does not navigate. The same thing is working fine in 0.66.4. I feel this warning might have something to do with it. I do not see any error or any such thing on the metro server as well. Also attaching the versions of react navigation.
"#react-navigation/bottom-tabs": "^5.11.10",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^2.3.0",
I want to make a specific screen that occupies the full-screen. I have a react-native-video player with custom styles, as seen in the "basic" example at the following link
https://github.com/react-native-community/react-native-video/tree/master/examples/basic
But I can't do the full screen with custom styles. I implemented a modal to simulate the full screen as seen in the image:
And also activate StatusBar.setHidden (true) but I can't disappear the navigation buttons in Android
I tried installing the react-native-full-screen library but it didn't remove the navigation buttons.
Maybe someone comes up with a solution.
I'm using
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-navigation": "6.4.0",
"react-native-video": "^5.1.0-alpha8",
My basic static React Redux TypeScript app works locally on Windows, and then it also works when I deploy to GitHub Pages for every device I've tested except iPhone 6 iOS 12.0.1 (where it is a blank white screen).
I've researched many articles, such as:
React/redux app renders blank screen on Safari
React/Node Uncaught SyntaxError: Unexpected token <
Why deployed react app on gh-pages is showing blank page on different browsers while showing correctly on my browser?
https://stackoverflow.com/a/57027870/470749
https://community.netlify.com/t/react-application-builds-deploys-into-a-blank-page/2571
https://github.com/facebook/create-react-app/blob/061d1e46fcd4766d38b45499c3d29cfaa2b7d0af/packages/react-scripts/template/README.md#github-pages
https://caniuse.com/#feat=es6
Most of them try to solve the case where all devices show a white page. But that's not my scenario.
Others talk about how older browsers need polyfills, but I've already added try/catch blocks around my use of fetch.
I've also tried changing to "homepage": "." in package.json, but again, I don't think that's related to the issue because most browsers already work, so I know that the assets are being accessed.
Any ideas?
Finally I remembered that I could use the free http://xip.io/ service to browse from my iPhone to the "local" React server hosted on my Windows machine.
That way, I could see error messages that wouldn't be visible on production (at GitHub Pages).
I discovered that the error was "ReferenceError: Can't find variable: IntersectionObserver".
So the solution would be to use a polyfill.
See helpful links:
https://stackoverflow.com/a/55767479/470749
https://stackoverflow.com/a/59368511/470749
https://github.com/mhartington/lazy-load-image/issues/1#issuecomment-372384646
https://webkit.org/blog/8582/intersectionobserver-in-webkit/
https://caniuse.com/#feat=intersectionobserver
"IntersectionObserver API is supported on iOS Safari since 12.2." That explains why it worked on other iPhones but not mine.
I'm new to react. Having a very weird issue referencing react-table in Chrome. As soon as I add import statement to my page: import ReactTable from 'react-table'; and then perform any action on ANY part of the page or re-render, I get a weird syntax error in Chrome on this line: import PropTypes from 'prop-types' in propTypes.js.
This error visible in dev tools source only. Nothing in console. When hovered over it states "Uncaught SyntaxError: Unexpected identifier".
This happens in Chrome only and preventing any debugging but doesn't cause any other errors and functionality seems to be unaffected.
It has something to do with 'react-table' package because as soon as I remove it's import, everything is fine and anything that I do on other pages doesn't have any affect on this error. When I tried to view the propTypes.js I can't even find this line there. Can someone at least point me to how to troubleshoot this?
Chrome is the main browser for customer base and it's essential for my development.
Chrome version: Version 64.0.3282.186 (Official Build) (64-bit),
node: 6.11.13
"react": "^16.2.0".
"prop-types": "^15.6.1",
"react-table": "^6.8.0",
I have been banging my head with this one and searching online for a while now with no result. Please help! Any tip is highly appreciated.