Anyone know why some users, specifically those using microsoft products , see a white screen for my React deployment? My deployment works and renders fine on my devices, mobile and standard. I have specified the homepage URL inside package.json ..
The error code for those experiencing the white screen is as followed
at Module.<anonymous>(index.js:13)
at l ((index):1)
at Object.(anonymous>(main.2a705d2.chunk.js:1)
at l ((index):1)
2:22
at t ((index):1)
at Array.r[as push]((index:1)
at main.2a705d2.chunk.js:1```
MY GITHUB REPO:
https://github.com/dreamingofcode/Travelly
deployment:
https://nervous-lovelace-0d5b8e.netlify.app/
Its pointing right to your error index.js:13 anyone without the redux devtools installed its going to fail. That is not the correct way to add in the dev tools. https://github.com/zalmoxisus/redux-devtools-extension
Related
im new to react and just getting used to changing between webpages using react-router. However whenever I install react-router using 'npx I react-router-dom' and then reload the webpage I get white bars at the edge of the page even though I haven't changed any code.
//Before react router install
no bars
//After installing - white bars at edge
White bars at edge
Thanks any help would be appreciated!
Just for future reference if anyone is struggling with this iv'e found a post here:Encountering white-space at top of react-app
which fixed the issue
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 am starting to help someone with a new project. This project is React (React Native as is a mobile app).
The project is working fine on her laptop (in her browser), and when I scan the Expo QR code, the app works fine on my Android device.
However, trying to run it in my browser is throwing all these errors:
The 'Can't resolve' error doesn't make sense, because the correct react native files are there. Is this a cache problem? I have tried deleting the .expo/web/cache folder and starting over.
Also, why are there multiple errors in my console, but only one being shown in the information on the actual web page? Does this mean that the single error being shown is causing all the other errors, or it is the only one which needs fixing, or will it show the next error when I fix the one that is being shown?
Thanks
Seems to have been a known problem re babel. See the links below:
https://github.com/babel/babel-loader/issues/173
how to solve this error You may need an appropriate loader to handle this file type
When I launch my React application I have a strange output in the console, and I am really curious about it:
I think i could probably be missing a parameter referencing the version of the app, just need some Stackoverflow clarity. Here is my main.js where you can see the issue (line 42):
Thank you!
It's the Katalon Recorder Chrome Extension. If you hover over main.js tab you'll be able to see the location of the file.
I am developing a mobile app with React native and trying to use firebase as a database. Yesterday I tried to upgrade my React native version from 0.37 to 0.40 but some files conflicted and my app didnt start. So I reverted to version 0.37. ( I copy pasted conflicted files with my earliest copies to solve this)
Now, when I copy paste firebase code snippet to my App.js file to setup firebase, I get an error "Cannot read property 'getItem' of undefined"
If I remove firebase snippet everything works fine. Otherwise after 1-2 seconds red screen pops up with the error on attachments.
I am suspecting, I broke something on the way to reverting react native 0.37. I tried to uninstall and reinstall firebase with no avail. Now I am beating my head and any help would be greatly appreaciated.
I found a solution to my problem. It seems that problem is not with firebase but its because of chrome debugger. Having the 'device toggle toolbar' (CMD SHIFT M) enabled in chrome seems to be causing the problem. De-selecting 'device toggle toolbar' and reloading the emulator gets rid of the error.
Check the image link for sample please.