How to run ES6 React app in IE9 without errors

Question

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

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

SCRIPT5022: Exception thrown and not caught

on the line

ReactDOM.render(

When I trap the exception, it shows that it is being thrown from 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 app proceeds normally, although I do see these warnings (possibly unrelated, and discussed at https://github.com/facebook/react/issues/4990):

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

All my components do 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 would this _classCallCheck be being triggered in IE9, and what could I do differently to prevent it?

Answer 1

It turns out that the following are problems for IE9:

1.

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 connected components as non-top-level components, ie giving them a name within 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, specifically removing it from .babelrc used by babel-plugin-react-transform.

Only completing ALL these steps allowed my app to run satisfactorily on IE9.