response 0.14.2 error - Super表达式必须为null或函数

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

在从0.13.2更新到0.14.2之后，我得到了这个错误:

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

未捕获的类型错误:超表达式必须是null或函数，而不是对象

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.

关于这个问题已经有几个问题了。最常见的错误是error spelling .component(没有大写C).另一个错误是尝试使用版本< 0.13的ES6类。

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(...))

但是，我已经成功地使用了ES6类，它们的反应是0.13。x，我在任何地方都用大写C，然后日志记录。组件似乎给出了适当的结果(函数反应物组件(…))

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?

在搜索之后，我做了这3个测试用例，其中2个抛出了相同的错误(我不理解为什么)，另一个没有。似乎暗示类发生的顺序是一个问题?

TEST 1 (throws error)

测试1(错误)

//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)

测试2(将基本成分置于测试中。jsx,仍然错误)

//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!?)

测试3(把基本单位放在测试类定义之上，没有错误!)

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

我正在使用webpack与babel编译成一个包。

update Changing

更新变化

export default class BaseComponent extends React.Component { }

来

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

也删除了错误!这意味着我现在要重构它，但它不能解决问题，因为导出默认类应该是有效的

2 个解决方案

#1

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

我找到了解决方案。因为babel的变化，我也更新了。如果你使用:

export default class BaseComponent

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

您还需要使用import而不是require，因此:

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

用这个正则表达式替换,无处不在:取代:var((\ w _)+ ?)=需要$’((\ w _。\ /)+ ?)”$;与:从“$2”进口$1;

#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?

不久前我遇到过类似的问题，删除node_modules文件夹并重新安装所有对我有用的东西，你能试试吗?

#1