How to run ES6 React app in IE9 without errors - reactjs

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.