1

I'm developing a page with the following libraries;

  • jQuery (1.7.2) (older version because of a dependency issue, but have tried up to 1.9.1, doesn't fix issue).
  • Backbone (1.1.0)
  • lodash (2.4.1)
  • modernizr (2.7.1)
  • gsap (1.17.0)

The page use canvas and gsap for animation. Everything works great in IE11, Chrome, Safari, Firefox, and IE8 (animations disabled for IE8), but IE9 and 10 just throw this error in the console over and

unable to get property 'replace' of undefined or null reference

The line referenced is in jquery.js, line 622, which is the return statement in this code:

// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

I can't figure out how to determine what part of MY code caused this jQuery code to fire, so I'm unsure as to what may be the issue on my end.

Does anyone know a fix for this? Or alternatively, how I can view what part of my code caused this jquery code to fire (using IE dev tools)?

tdc
  • 5,174
  • 12
  • 53
  • 102

3 Answers3

1

Turns out the issue wasn't something inherently wrong with IE, but rather I was trying to access an object which didn't entirely exist yet. The other browsers this was not an issue (perhaps their JS engines were just fast enough for it to be a non-issue), but I've now added checks to ensure all the relevant content has loaded before executing the problematic function and the issue seems to be gone. Thanks for the help, all.

tdc
  • 5,174
  • 12
  • 53
  • 102
  • I'm running into this problem. Can you detail what you were referring to as "checks"? – itsmikem May 01 '16 at 13:51
  • @itsmikem mostly type checks, `if (typeof myVar !== 'undefined') { ... }` – tdc May 01 '16 at 15:41
  • I ran into this situation where I was doing `$(something_in_ram).find(something_inside).after(function(){return (cond)?this:that})` and I ended up having to define the "this" or "that" before calling after. I also think it was a case of IE javascript engine slower than Chrome, because it works fine in Chrome. Your answer really helped me along. Thanks. – itsmikem May 01 '16 at 16:13
0

What kind of tool are you using for debugging? I have a solution for you for Chrome debug console
1. First go Find the jquery script file in the console, right click and select "Blackbox script" it is going to be ignored while debugging, only your files are going to be considered
2. Activate break on errors and a breakpoint is going to be triggered on the line of code where the exception is occurring
Check JavaScript: Is there a way to get Chrome to break on all errors?
and https://developer.chrome.com/devtools/docs/blackboxing

Community
  • 1
  • 1
Pax
  • 1
  • 1
  • The problem is only occuring in IE, I'm not even sure the jquery code is firing in non-IE browsers ( it seems to specifically be targetting IE ). – tdc Aug 28 '15 at 21:06
  • in IE you need to start debugging to have breakpoints being hit. – Puzzle84 Aug 28 '15 at 21:08
  • 1
    Also check out this url: http://stackoverflow.com/questions/23904509/error-when-creating-element-using-jquery he's getting the same error you are. might be related. – Puzzle84 Aug 28 '15 at 21:10
  • 1
    You can still activating the break on errors option in IE devtools (available from IE8). It will break in camelCase function and you can follow the stacktrace to know where the call is being done from your code. https://msdn.microsoft.com/en-us/library/dd565625(v=vs.85).aspx – Pax Aug 28 '15 at 21:14
0

Maybe I'm wrong here but is it possible that IE8-9 "string" is a reserved word? Maybe not. But the only time .replace would show that message is if you were not feeding it a string. 

camelCase: function( string ) {
    if(!string){ 
         console.log("string is falsy", string);
         return string;
    }
    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},
SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98