React-router: version 2.4 breaking IE8 compatibility

[saalmaan]

Version

2.4.0

Test Case

http://jsbin.com/fatabufupe/1/edit (jsbin doesn't work in IE8 :)

Steps to reproduce

import { Router } from 'react-router';
just importing [email protected] breaks IE8 compatibility

Expected Behavior

should work as v2.3.0

Actual Behavior

it throws an error "throw TypeError("Accessors not supported!");"

Bable config

{
  "presets": ["react", "stage-1", "es2015-loose-native-modules", "es2015-loose" ],
  "env": {
    "development": {
      "plugins": [
        "transform-es3-property-literals",
        "transform-es3-member-expression-literals",
        "transform-object-rest-spread"
      ]
    }
  }
}

[aweary]

It should be noted that, per the README:

Browser Support
We support all browsers and environments where React runs.

and that React no longer supports IE8.

[saalmaan]

Thank Aweary, we are using react version 0.14.7, which does support IE8,
If react router has dropped support for IE8 from version 2.4 then it should have stated that in the release notes just like react has from version 0.15.0

[taion]

This isn't intentional. We're probably missing some ES3 transforms.

[saalmaan]

by the way I am just trying out hello world example and it still breaks with v2.4. I compared my .bablerc with react-router's and only difference I can see is that I am not using "add-module-exports" even adding that doesn't resolve it.

@taion any ideas which ES3 transformer I might be missing

react-router .bablerc

{
  "presets": ["react"],
  "plugins": ["dev-expression"],

  "env": {
    "cjs": {
      "presets": ["es2015-loose", "stage-1"],
      "plugins": ["add-module-exports"]
    },
    "es": {
      "presets": ["es2015-loose-native-modules", "stage-1"]
    }
  }
}

[taion]

No, I mean the babelrc here is probably missing es3 transforms.

[timdorr]

Actually, it's a Babel bug: https://phabricator.babeljs.io/T7322

[saalmaan]

Good find @timdorr, (just noticed you raised that bug :) bug report says that adding add-module-exports fixes it however react-router .bablerc has got it already as you can see, and I also added it my project but it didn't fix the issue. so wondering now what could be the problem, can please someone else confirm if they are having issues with RRv2.4 and IE8?

[timdorr]

That fixes an issue with Babel 6's default exports and CommonJS usage. It doesn't fix anything with IE8.

The issue is coming from our generated code. You can see it in the UMD build: https://npmcdn.com/[email protected]/umd/ReactRouter.js Those Object.defineProperty's with the getters at the top are the problem, as getters aren't polyfillable and aren't supported in IE8.

[saalmaan]

I get it now, so we wait for bable to fix its bug? for Us I think we will stay at ver v2.3 until this has been resolved.

[timdorr]

If you pull the source straight from github, you can transform with whatever version of Babel works best for you (which would be <6.0 in this case).

[saalmaan]

Ah why I didn't think of that :) that is best for now thanks @timdorr

[taion]

Well, if it's a Babel bug, there's nothing we can really do here.

[saalmaan]

@timdorr I tried babel v5.8.38 and tried to compile react-router from source from but it didn't work, still getting some strange issues, IE8 debugging is nightmare :( have you tried it yourself? that will prove if its latest babel v6+ bug.

[timdorr]

Yes, it's 6.0.0. Here's where it was added: https://github.com/babel/babel/blame/master/packages/babel-plugin-transform-es2015-modules-commonjs/src/index.js#L17-L24

I haven't tried building from source for IE8. Make sure you're not using npm to grab the source from Github. You'll need to include it as a submodule or fork the code to make it work, I believe.

[ntkoopman]

This is caused by using export from like `export Router from './Router'. This gets transformed into a getter to mimic the spec behaviour, but this does not work in IE8.
The solution would be to import and export separately:

import _Router from './Router'
export const Router = _Router;

[taion]

Feel free to make a PR to add the appropriate ES3 transforms.