Material-ui: Internet Explorer 11 doesn't work

[kodermax]

https://material-ui-1dab0.firebaseapp.com/#/

Problem description

Link to minimally-working code that reproduces the issue

I see error

Versions

• Material-UI: 1.0-alpha
• React: 15.4
• Browser: IE 11

[m2mathew]

Here is more detail about this error:

Link to Facebook error

[m2mathew]

@kodermax The error message indicates that you may have two different versions of react installed. Does your package.json only have 15.4.2 installed?

[kodermax]

Yes I have only 15.4.2 version.

[mbrookes]

@m2mathew You can reproduce this by visiting the published next alpha docs site that @kodermax linked to.

[mbrookes]

@oliviertassinari Any ideas?

I've no idea why this only affects IE 11. I don't think it can be duplicate React - the error does say "may be caused by", but not what other possible causes are.

This affects our next docs site, so it isn't something @kodermax is doing wrong...

[oliviertassinari]

My best guess would be that it's linked to one of the following babel plugins: https://github.com/callemall/material-ui/blob/next/docs/.babelrc#L13-L19

[oliviertassinari]

I have found the issue:

• Firefox 37: OK
• Firefox 36: OK
• Firefox 35: KO

Guess what, Symbol is only supported with Firefox 36, same with Edge.
It's coming from this plugin: transform-react-inline-elements.

[oliviertassinari]

We need to polyfill Symbol

Note that this requires the global polyfill due to React's use of ES6 Symbol when validating React Elements. If Symbol is not present in the browser, your application will fail to render, as Babel will polyfill Symbol but React will not have access to that polyfill.

Therefore, you must require the global polyfill at the entry point to your application:

require("babel-polyfill");

[mbrookes]

So every user is required to use that polyfill in their app? That doesn't sound good...

[oliviertassinari]

@mbrookes this issue has nothing to do with Material-UI it's specific to react, babel and the docs site.

@kodermax Sorry but we won't provide support on your app for the above reason. But thanks for raising the issue.

[oliviertassinari]

@kodermax My bad, I haven't realized that this Babel plugin is also used for the npm package. It's affecting every @next users.

[oliviertassinari]

Still not done, I have found at least one issue: https://github.com/reactjs/react-transition-group/pull/25

[kodermax]

thank you for fix.

[oliviertassinari]

Fixed with https://github.com/callemall/material-ui/commit/ddb0be14484d85069584fc9f4a139f2140707df1