React 0.14.2 error - Super expression must either be null or a function

Question

After updating from 0.13.2 to 0.14.2 I'm getting this error:

Uncaught TypeError: Super expression must either be null or a function, not object

There are several questions about this already. The most common error is misspelling React.component (without a capital C). The other one is trying to use ES6 classes with versions < 0.13.

But I was already succesfully using ES6 classes with React 0.13.x, and I use capital C everywhere, and logging React.Component seems to give an appropriate result (function ReactComponent(...))

After some searching I made these 3 test cases of which 2 throw the excact same error (without me understanding why) and one does not. Seemingly suggesting the order in which classes occur is an issue?

TEST 1 (throws error)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var BaseComponent = require('./BaseComponent');

class Test extends BaseComponent {
    render() { return <div>Test worked</div>; }
}
ReactDOM.render(<Test />, document.getElementById('test'));

//BaseComponent.jsx
var React = require('react');
console.log(React.Component); // <--- logs "function ReactComponent(...)" !!
export default class BaseComponent extends React.Component { }

TEST 2 (put BaseComponent under in Test.jsx, still error)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
class BaseComponent extends React.Component { }
ReactDOM.render(<Test />, document.getElementById('test'));

TEST 3 (put BaseComponent above Test class definition, no error!?)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class BaseComponent extends React.Component { }
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
ReactDOM.render(<Test />, document.getElementById('test'));

I'm not even sure anymore this will solve my actual problem. But understanding what's happening in these test cases may help me get to the solution.

I'm using webpack with babel to compile into a bundle.

update Changing

export default class BaseComponent extends React.Component { }

To

class BaseComponent extends React.Component { }
module.exports = BaseComponent;

also removed the error! Which means I'm going to refactor that now, but it doesn't solve the issue, because export default class should just work

Solution

I found the solution. It's because of a change in babel, which I also updated. If you use:

export default class BaseComponent

You also need to use import instead of require, so:

import BaseComponent from './BaseComponent'

instead of

var BaseComponent = require('./BaseComponent')

Used this regex to replace that everywhere: replace: var ([\w-_]+?) = require\('([\w-_.\/]+?)'\); with: import $1 from '$2';

Comments

[machineghost]

I suspect you could also use var BaseComponent = require('./BaseComponent').default, if for some reason you didn't want to use the ES6 module syntax.