ReactJS | Приложение не работает на IOS и IE / Edge

Question

Версия Edge: Microsoft Edge 44.18362.449.0 Microsoft Edge HTML 18.18362

Версия IE: 11.592.18362.0

Надеемся, мы сможем быстро это отсортировать:

Мой reactjs проект после сборки и развертывания работает на chrome и firefox - на windows и android. Однако на IE, Edge и Safari (также chrome на IOS) я получаю пустую страницу со следующей ошибкой:

Для 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

Интересный факт на стороне: Перед удалением моего Заголовка импорта компонента (для устранения неполадок) пришло то же самое сообщение, но вместо index сказано заголовок . У меня нет компонента под названием индекс. За исключением исходного индекса. js. Таким образом, я предполагаю, что reactjs имеет фундаментальную проблему в этих браузерах. Я предполагаю, что у него есть проблемы с реакцией сборок файловых структур?

Я пробовал polyfill и core-js / stable, оба не имеют никакого значения в результате.

* К сожалению, я не могу получить доступ к любым инструментам разработчика на моем Ipad, чтобы получить журнал консоли ios chrome и Safari. Я предполагаю, что это та же самая проблема.

Answer 1

Я нашел ошибку

После того, как я почти сдался, я нашел решение. Я перестраивал проект по частям, npm установка для npm установка, блок кода за блоком кода, пока я наконец не нашел проблему:

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

Да, как всегда, одна строка кода, сломал весь проект. Видите ли, chrome и firefox возвращают другое значение при использовании навигатора для получения языка браузера.

В моем случае Chrome и Firefox вернули en, а edge вернул en-DE

Таким образом, будучи использованным, чтобы схватить правильный язык json сломал ссылку. Таким образом

"Невозможно получить свойство 'index' с неопределенной или нулевой ссылкой"

Перед удалением моего импорта компонента Header (для устранения неполадок) пришло то же сообщение, но вместо индекса было сказано заголовок. У меня нет компонента под названием индекс. За исключением исходного индекса. js. Таким образом, я предполагаю, что reactjs имеет фундаментальную проблему в этих браузерах. Я предполагаю, что у него есть проблемы с получением файловых структур реагирующих сборок?

, когда я ссылаюсь на язык в json, например, так:

my_json[language]["index"]

index - селектор страниц кажется, что это связано с компонентом, когда селектор был

my_json[language]["header"]

Так что я на самом деле был на правильном пути, но это была моя "файловая структура / json структура", которая сломалась в Edge IE и Safari. Так близко и все же так далеко.

---

Это было довольно странное и унизительное переживание. В конце концов, обнаружение этого сделало мой день все же! Спасибо всем, кто хотя бы сломал голову, читая этот вопрос.

После обнаружения этого сообщения об ошибке имело смысл, однако в настоящее время сузить его было невозможно. Наличие всплывающих имен компонентов также сделало эту охоту на ведьм некоторое время.

ОБНОВЛЕНИЕ ЭТОГО:

Похоже, что "хром" уже сообщал о "проблеме", на самом деле это ошибка, при которой возвращается только язык, но не код страны.

Chrome browser - navigator.language не возвращает код страны

Мое исправление:

Только на языке возврата:

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

Для возврата только кода страны:

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