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.
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";
Related
I searched everywhere to find the solution, but I find none of them are relevant to mine.
I tried to store a variable in local storage, but I'm getting the below error:
raise MakeError('TypeError',
JsException: TypeError: Undefined and null dont have properties (tried getting property 'setItem')
So I checked whether it is running on browser,
if (typeof window !== 'undefined') {
console.log('You are on the browser')
if(message1!='undefined'){
console.log("message1 is not undefined")
window.localStorage.setItem("vOneLocalStorage",message1);
}
}
Before giving the error, it printed "You are in the browser" in console, which I gave in the code to test
output in console before giving the error
I don't understand what is the cause, and why is it not able to store the variable in the local storage.
The tech stack I use are Javascript, React, python, and Js2py library to pass input from Python to Javascript.
Lately we have been getting a lot of javascript errors "can't redefine non-configurable property "userAgent"".
We don't attempt to redefine userAgent in our code. We barely even reference userAgent. The only places would be in code like the following:
var browser_msie = (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) ? true : false;
I am wondering if this error is rather coming from some bad browser behavior. It only started showing up recently.
Last evening we got over 20,000 of such error messages, and all from the same member of our service.
EDIT
The error information is as follows:
Error Message:
Message: TypeError: can't redefine non-configurable property "userAgent"
URL: https://www.rephunter.net/member-home.php
Line:1
Column:130
Stack:#https://www.rephunter.net/member-home.php:1:130
Error Traceback:
#0 Called backtrace in file /var/www/rephunter/www/webroot/include/error-handler-inc.php as line #68
#1 Called error_handler in file as line #
#2 Called trigger_error in file /var/www/rephunter/www/webroot/ajax/javascript-error.php as line #14
Unfortunately this offers no help, as line 1 of the page is just <!DOCTYPE html>. I don't see how to get to that part of the code. Of course if that were possible it might be easy to see the cause of the issue.
I recall in the past the Dev Tools might have given a "spiders view" of the page, but now I only see the DOM on the Elements tab, and Sources. Both of these are formatted and their is no way to see what "line 1 char 130" means.
We just installed an error-tracker for our Ember-application, and the only error that is reported is Cannot read property 'find' of undefined. The code that cause this error is within a component, and looks like this:
this.set('interval', setInterval(() => {
const current = this.get('counter') - 1;
this.set('counter', current);
this.$().find('.countdown-number').text(current); // <- error here
}, 1000));
I don't understand how this can happen. How can $() be undefined, since it's a part of the ember framework?
According to the error-tracker, it happens for a bunch of different browsers, latest Chrome for example. I however can't reproduce the error in any browser.
I know this isn't the "ember way" of updating a text in a div, but I would prefer to not have to rebuild a lot, I just want to fix the bug with as little changes as possible.
this.$() will be undefined if component is destroyed or didn't render properly. Make sure you call this.$() only when component is in DOM and on willDestroyElement you remove all events that could access this.$().
I'm trying to detect whether my react-native app was launched by the user tapping a push-notification banner (see this excellent SO answer on the topic).
I've implemented the pattern Mark describes, and have discovered that the "notification" objects being provided by PushNotificationIOS.getInitialNotification are really bizarre, at least in cases when there isn't a notification to retrieve. Detecting this case has been a PITA, and I'm actually quite confused.
From what I can tell, PushNotificationIOS.getInitialNotification returns a promise; this promise is supposed to resolve with either null or an actual notification object -- null when there is no notification waiting for the user. This is the scenario I'm trying to detect and support.
Here's why it's such a pain to detect; the following tests were all run when there is no notification to find:
// tell me about the object
JSON.stringify(notification);
//=> {}
// what keys does it have?
Object.keys(notification);
//=> [ '_data', '_badgeCount', '_sound', '_alert' ]
So it stringifies to empty, but it has four keys? K...
// tell me about the data, then
JSON.stringify(notification._data);
//=> undefined
// wtf?
These bizarre facts frustrate both my understanding and my ability to distinguish between cases where there's an actual notification to react to vs. cases where the mailbox is empty. Based on these facts, I assumed I could test for the members I want, but even the most careful probing produces false positives 100% of the time:
PushNotificationIOS.getInitialNotification()
.then((notification) => {
// usually there is no notification; don't act in those scenarios
if(!notification || notification === null || !notification.hasOwnProperty('_data')) {
return;
}
// is a real notification; grab the data and act.
let payload = notification._data.appName; // TODO: use correct accessor method, probably note.data() -- which doesn't exist
Store.dispatch(Actions.receivePushNotification(payload, true /* true = app was awaked by note */))
});
Every time I run this code, it fails to trigger the escape hatch and throws on let payload because undefined is not an object (evaluating 'notification._data.appName').
Can someone explain what's going on here? Is PushNotificationIOS.getInitialNotification broken or deprecated? How in JS is it possible to have a key that evaluates to undefined? How can I detect this scenario?
Experienced javascripter, pretty puzzled here. Thanks for any help.
BTW: using react-native v0.29.0
The notification is an instance of PushNotification, not a plain object, that's why it stringifies to an empty object since no custom toString was implemented for it.
It sounds like a bug to me (which should be reported if not already) that the object is created when no notification is available.
Anyway, to workaround this issue, your check should actually be:
if(!notification || !notification.getData()) {
return;
}
Update: Issue has been fixed in 0.31 - see Github issue for more details.
I am getting the following error:
Uncaught TypeError: Cannot read property 'property' of undefined.
Undefined is a javascript viewmodel. This error does not occur when running locally, or when deployed to a different environment hosted in the exact same way.
However, I have noticed that the definition of this specific viewmodel is not making it into main-built.js (using Durandal and Node.js) In the router config I have the following:
router.mapRoute('viewmodel', 'viewmodels/viewmodel.vm', 'view model', false);
Is there anything else I need to do to get the definition of this viewmodel into main-built.js? As far as I can tell, all I should need to do is the router mapping.
So I'm pretty sure I have found the solution to my problem.
There was a check for "latestValue" on an array in knockoutjs. It appears that when running in debug mode, it slowed the site down just enough for there to be a value to check. When running in release mode, things sped up to the point that there was no 'latest' value.
So... bad:
if ( myObject.latestValue.objArray[0] == "") { blah }
Good:
if ( myObject().objArray[0] == "") { blah }