How to run ES6 React application in IE9 without errors

Question

I am working on a JS application using React 0.14 and Babel 5.8.23.

My application works fine in Chrome, with no warnings, but when I view the application in IE9, the application explodes showing:

SCRIPT5022: Exception thrown and not caught

on the line

ReactDOM.render(

When I delay the exception, it shows that it throws itself out of this code:

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

When I manually remove these throws from the generated index.js , the application works fine, although I see these warnings (possibly not related and discussed in https://github.com/facebook/react/issues/4990 ):

Warning: MainLogo(...): React component classes must extend React.Component

All my components extend React.Component:

 import React, { Component } from 'react'; export default class MainLogo extends Component { render() { return ( <h1 className="logo"> <img src="/img/brand/logo.png" /> </h1> ); } }; 

Why is this _classCallCheck launched in IE9, and what can I do differently to prevent it?

Answer 1

It turns out that for IE9 there are the following problems:

one.

 import React, { Component } from 'react'; export default class Whatever extends Component { ... 

I had to import React; and then ... extends React.Component .

2.

I had to export my connect ed components as top-level components, that is, give them a name in the file:

 export class App extends React.Component { ... } export const AppContainer = connect(state => ({ routerState: state.router }), { pushState }) (App); 

3.

I had to disable livereactload https://github.com/milankinen/livereactload , in particular, remove it from the .babelrc used by babel-plugin-react-transform .

Only the completion of ALL of these steps allowed my application to work satisfactorily on IE9.