I am able to view my app in chrome. But when I tried in internet explorer. I am getting a blank page, and in Edge, I am getting unexpected behaviour.
What can I do to resolve these kinds of errors?
I followed https://github.com/facebook/react/issues/8379 and installed polyphils but that also didn't work out.
Related
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
My ui-router and custom directive templates are not loading in Internet Explorer 11. This is the error for each one:
[$compile:tpload] Failed to load template: blah/blah.html (HTTP status: undefined undefined)
Everything is working fine in Chrome, Firefox and Edge.
Any pointers or guesses of why this maybe happening would be greatly appreciated.
For JavaScript, In Internet Explorer, there is normally an issue because of 'use-strict' mode. If your application appears to somewhere have an object with two properties of the same name, 'use-strict' will cause it to crash.
For HTML, there must be a missing closing or an opening tag which is not rendering the pages
OK, this is fixed. There was an ES6 endsWith() method being used which is unsupported in IE11. There was no error regarding this in the console - I found the issue by ensuring "Break on all exceptions" was select in the IE dev tools debugger. The fix was to simply add a polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith
I have a react-relay graphql app that works perfectly on new browsers, but on safari 5.1.10 (2013) it doesn't work. The site is just white. Same happens with older versions of chrome.
The console gives:
TypeError: 'undefined' is not a function (evaluating 'e.startsWith("client:")')
I looked through react-relay/dist/relay.min.js and saw isClientID:function(e){return e.startsWith("client:")}.. it seems thats the failing function.
Has anyone encountered this before? Any ideas on a fix or what could be causing it?
I'm using Angular on my site, but I've been having reports on it often not working. Often users have to try different browsers/devices to get it to work. On my computer it works fine on Chrome, Opera and Firefox, latest versions. I've had reports of the page not working for visitors when using Firefox (version 31.6.0) and Safari though.
I have a smartphone of brand Öwn (Chilean or Peruvian I think), and the angular code does not work on this phone. I've tried using Chrome and the Öwn browser (some browser of their own). I have expandable content powered by jQuery, and that works fine, so it's definitely only Angular the page has problems with.
I tried removing all dependencies (using ngAnimate and ui.bootstrap for datepicker, and ngDialog), but still doesn't work on my phone.
I'm sorry I don't have more details. This is the page where the problems happen:
https://www.easterisland.travel/tours/
Does anyone have a clue? Thank you!
The problem in the end was in the code of an Angular function. When declaring a new object, I hadn't applied a value to one of the variables. This:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP};
should have been this:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP: savingsPP};
It was tricky since some browsers accepted it (Chrome and later Firefox) but many didn't. To locate the problem I checked error console of Safari Mac, and all it said was that angular.min.js.map and angular-animate.min.js.map were missing. .map files are for showing debug messages with minified code. Once the .map files had been added (find .map files for angular here, clicking folder for your angular version), the error console showed me exact location of the error.