CODEWITHSUNDEEP
javascriptreactjsecmascript-6webpackbabeljs
Flion
Flion

Reputation: 10902

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

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

Upvotes: 11

Views: 12355

Answers (2)

Flion
Flion

Reputation: 10902

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';

Upvotes: 5

luanped
luanped

Reputation: 3198

I had a similar issue a while ago, deleting the node_modules folder and reinstalling everything worked for me, maybe you could try that?

Upvotes: 0

Related Questions