13

I'm using facebook's react. Not sure whats causing this error, seams to be react itself?

I'm getting an IE8 script error: Object doesn't support this property or method on line 10898 for react.js

I'm not using the minified version, this is the dev version that is commented. Anyone else having an issue with facebook's react not working in IE8? Wondering if there's some sort of setting that has to be used for react to work in IE???

asherrard
  • 683
  • 1
  • 8
  • 11
  • I'd just drop support for IE 8 and not worry about it... it's a 4 year old browser. – Jason Whitehorn Oct 08 '13 at 22:22
  • 12
    while its true that IE8 should be banished from the face of the planet, its easier said than done when you have customers with 10's of thousands of desktops that all still run Windows XP.... – E.J. Brennan Oct 08 '13 at 22:28
  • 1
    Did you add the polyfills listed at the end of this page? http://facebook.github.io/react/docs/working-with-the-browser.html Note also that JSXTransformer.js is currently incompatible with IE8, so you need to precompile your JSX. – Sophie Alpert Oct 08 '13 at 22:53
  • @BenAlpert You are absolutely right, I completely ignored that section of the documentation. Adding the polyfills and switching to the minified version works(to get rid of the console.log polyfill)! Luckily I'm using Grunt to precompile the templates but that's good to know for others trying to use react – asherrard Oct 09 '13 at 02:20
  • @asherrard indeed, the console-polyfill will be missing if you get this error. It's a good idea to wrap it in a NODE_ENV check so it automatically gets removed when you envify/minifyify: `if (process.env.NODE_ENV !== 'production') { require('console-polyfill'); }`. No need to use React's minified build. – smhg Jul 25 '15 at 07:16
  • link to webpack friendly Q: http://stackoverflow.com/questions/31122193/babel-polyfill-what-is-that – ptim Jun 02 '16 at 02:40

2 Answers2

21

Make sure to add the polyfills listed at the end of this page:Refs and the DOM

Note also that JSXTransformer.js is currently incompatible with IE8, so you do need to precompile your JSX.

Edgar
  • 6,022
  • 8
  • 33
  • 66
Sophie Alpert
  • 139,698
  • 36
  • 220
  • 238
2

I had this same issue and it turns out it was because of how I was building the bundle.

If you're using webpack or browserify you need to "envify" it. There are places in the code base that look like this:

if (process.env.NODE_ENV !== "production") {
  doSomethingNotIE8Compatible()
}

To remove these, the react build uses the envify browserify transform to go and replace the process.env.NODE_ENV instances with the string with the value of your local terminal environmental variable.

For example, the first line becomes:

if ("production" !== "production")

After this you should use uglify to remove the dead code to save size.

Finally, you need to run the code through an ES3-ifer to get rid of some small things that are legal in ES5 but not ES3. For example, catch function calls.

TLDR: at my company we have had a lot more success just using the CDN build rather than trying to get it bundling correctly.

Duncan Finney
  • 2,054
  • 1
  • 12
  • 15
  • Can you elaborate on what you mean by "envifying" it? I'm using browserify and I'm running into this exact same issue. – Rey Apr 29 '15 at 19:45
  • 1
    It's a browserify transform. I tried to explain it in that post, but it's very confusing. You can check it out here: https://github.com/hughsk/envify . After that goes through, then you can remove the dead code with uglify. The transform is listed on react's package.json so if you are using browserify you can just set NODE_ENV to "production" and it SHOULD just work. It's a lot of hassle though. We just switched to the official release at my place. Makes the build a lot faster too. – Duncan Finney Apr 29 '15 at 20:24
  • Cool. is there a reason that this needs to be done specifically for IE8? – Rey May 01 '15 at 16:39
  • The big one that usually happens is with promises. `myPromise().then(blah).catch(blah)` blows up in IE8 because the parser is probably just a regex and not an AST. ES3ify will take that and turn it into this: `(myPromise.then(blah))["catch"](blah)` which works with IE8. – Duncan Finney May 07 '15 at 11:54