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

admin管理员组

文章数量:1278984

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 mon error is misspelling Reactponent (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 pile 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

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 mon error is misspelling React.ponent (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 pile 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

• javascript
• reactjs
• ecmascript-6
• webpack
• babeljs

Share Improve this question Follow edited May 23, 2017 at 12:17 CommunityBot 111 silver badge asked Nov 13, 2015 at 18:35 FlionFlion 10.9k1414 gold badges5252 silver badges7575 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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';

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

本文标签： javascriptReact 0142 errorSuper expression must either be null or a functionStack Overflow