ReactJS | App not working on IOS and IE/Edge

Question

Version Edge: Microsoft Edge 44.18362.449.0 Microsoft EdgeHTML 18.18362

Version IE: 11.592.18362.0

Hopefully we can get this sorted quick:

My reactjs project after being built and deployed is working on chrome and firefox - on windows and android. However on IE, Edge and Safari (also chrome on IOS) I get a blank page with the following error:

For IE:

TypeError: Unable to get property 'index' of undefined or null reference
   {
      [functions]: ,
      __proto__: { },
      description: "Unable to get property 'index' of undefined or null reference",
      message: "Unable to get property 'index' of undefined or null reference",
      name: "TypeError",
      number: -2146823281,
      stack: "TypeError: Unable to get property 'index' of undefined or null reference
   at value (https://xxxx/static/js/main.9016f2a2.chunk.js:1:2786)
   at Za (https://xxxx/static/js/2.97b2c280.chunk.js:2:331602)
   at Ja (https://xxxx/static/js/2.97b2c280.chunk.js:2:331451)
   at ju (https://xxxx/static/js/2.97b2c280.chunk.js:2:366905)
   at Nl (https://xxxx/static/js/2.97b2c280.chunk.js:2:351180)
   at Al (https://xxxx/static/js/2.97b2c280.chunk.js:2:351108)
   at wl (https://xxxx/static/js/2.97b2c280.chunk.js:2:348431)
   at gl (https://xxxx/static/js/2.97b2c280.chunk.js:2:345175)
   at oc (https://xxxx/static/js/2.97b2c280.chunk.js:2:373109)
   at Anonymous function (https://xxxx/static/js/2.97b2c280.chunk.js:2:374484)",
      Symbol()_6.wutlnu1cxkj: undefined,
      Symbol(react.async_mode)_y.wutlnu1cxkj: undefined,
      Symbol(react.concurrent_mode)_x.wutlnu1cxkj: undefined,
      Symbol(react.context)_o.wutlnu1cxkj: undefined,
      Symbol(react.element)_i.wutlnu1cxkj: undefined,
      Symbol(react.forward_ref)_p.wutlnu1cxkj: undefined,
      Symbol(react.fragment)_k.wutlnu1cxkj: undefined,
      Symbol(react.fundamental)_u.wutlnu1cxkj: undefined,
      Symbol(react.lazy)_t.wutlnu1cxkj: undefined,
      Symbol(react.memo)_s.wutlnu1cxkj: undefined,
      Symbol(react.portal)_j.wutlnu1cxkj: undefined,
      Symbol(react.profiler)_m.wutlnu1cxkj: undefined,
      Symbol(react.provider)_n.wutlnu1cxkj: undefined,
      Symbol(react.responder)_v.wutlnu1cxkj: undefined,
      Symbol(react.scope)_w.wutlnu1cxkj: undefined,
      Symbol(react.strict_mode)_l.wutlnu1cxkj: undefined,
      Symbol(react.suspense)_q.wutlnu1cxkj: undefined,
      Symbol(react.suspense_list)_r.wutlnu1cxkj: undefined
   }

Edge:

TypeError: Unable to get property 'index' of undefined or null reference

SCRIPT5007: SCRIPT5007: Unable to get property 'index' of undefined or null reference

Interesting fact on the side: Before removing my Header component import (to troubleshoot) this same message came but instead of index it said header. I have no component called index. Except the initiating index.js. Thus I am assuming reactjs has a fundamental issue in these browsers. I assume it has problems of getting the file structures react builds?

I have tried polyfill and core-js/stable, both make no difference in the outcome.

*Unfortunately I can't access any developer tools on my Ipad to get the console log of ios chrome and safari. I assume it's the same issue though.

production build/after being built and deployed, on dev mode I just get: "0: SyntaxError 0.chunk.js (44921,1)" which I didn't add as I found it completely useless. — lehm.ro, Jan 22 '20 at 17:29
Does your site work properly on the Dev mode side with IE and Edge browsers? If possible then try to provide any sample code or try to post any JSfiddle to check and reproduce the issue. It will be hard for us to guess the possible cause without checking the code. Let us know, which version of IE and Edge browser you are using for making this test? — Deepak-MSFT, Jan 23 '20 at 07:40
As I have stated in the post and previous comment, it doesn't work in dev and production mode on IE and Edge browsers. There is no sample code to provide as ReactJS in itself doesn't seem to work. The project compiles with 0 warnings/errors. Works like a charm on chrome and firefox in both dev and production build on PC and Android Smartphone.The problem is not in the project but that the browser doesn't understand the structure and/or syntax of reactjs. Which seems very odd. Polyfill also doesn't make any difference. I have tried every answer on every forum/platform. — lehm.ro, Jan 23 '20 at 08:07

lehm.ro · Accepted Answer · 2020-01-23T17:33:28.873

I found the BUG

After almost giving up, I have found the solution. I have been rebuilding the project piece by piece, npm install for npm install, block of code by block of code, until I finally found the problem:

const language = navigator.language || navigator.userLanguage;

Yes as always, one line of code, broke the entire project. You see, chrome and firefox return a different value when using navigator to get the browser language.

In my case Chrome and Firefox returned en while edge returned en-DE

So upon being used to grab the proper language json broke the reference. Thus

"Unable to get property 'index' of undefined or null reference"

Before removing my Header component import (to troubleshoot) this same message came but instead of index it said header. I have no component called index. Except the initiating index.js. Thus I am assuming reactjs has a fundamental issue in these browsers. I assume it has problems of getting the file structures react builds?

when I referenced language in a json like so:

my_json[language]["index"]

index being the page selector, and so seeming as if it had to do with the component when the selector was

my_json[language]["header"]

So I was actually on the right track, but it was my "file structure/json structure" that broke in Edge, IE and Safari. So close and yet so far.

This was quite a journey and humbling experience. In the end finding this did make my day though! Thank you to anyone who at least broke their head reading the issue.

After finding this the error message made sense, however at the current time, it was impossible to narrow down. Having the component names pop up also made this quite the witch hunt for a while.

UPDATE TO THIS:

It seems to be an "issue" already reported to chromium, it's actually a bug that only language but not country code is returned.

Chrome browser - navigator.language doesn't return country code

My fix:

To only return language:

const language = navigator.language.split("-")[0] || navigator.userLanguage.split("-")[0] || "en";

To only return country code:

const country = navigator.language.split("-")[1] || navigator.userLanguage.split("-")[1] || "us";

Thanks for posting the solution to this issue. I suggest you try to mark your own answer as an accepted answer to this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding. — Deepak-MSFT, Jan 24 '20 at 07:28
Yes, of course, I am just waiting as I have to wait as you stated 48 hours. — lehm.ro, Jan 24 '20 at 09:24

ReactJS | App not working on IOS and IE/Edge

1 Answers1

I found the BUG

My fix: