11

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

0

2 Answers 2

5

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

Sign up to request clarification or add additional context in comments.

1 Comment

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.
0

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

1 Comment

tnx for the tip! but nope, didnt help

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.