React 0.14.2 error - Super expression必须为null或函数

Question

从0.13.2更新到0.14.2后,我收到此错误:

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

有几个 问题已经存在.最常见的错误是拼写错误的React.component(没有大写字母C).另一个是尝试使用版本<0.13的ES6类.

但是我已经成功地使用了React 0.13.x的ES6类,并且我到处使用大写C,并且记录React.Component似乎给出了一个合适的结果(函数ReactComponent(...))

经过一些搜索,我做了这3个测试用例,其中2个抛出了相同的错误(没有我理解为什么),而有一个没有.看似建议课程发生的顺序是一个问题？

测试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 { }

测试2(将BaseComponent置于Test.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'));

测试3(将BaseComponent放在Test类定义之上,没有错误!？)

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

我甚至不确定这会解决我的实际问题.但了解这些测试用例中发生的事情可能有助于我找到解决方案.

我正在使用带有babel的webpack编译成一个包.

更新 更改

export default class BaseComponent extends React.Component { }

至

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

也删除了错误!这意味着我现在要重构,但它没有解决问题,因为export default class应该只是工作

Answer 1

我找到了解决方案.这是因为巴贝尔的变化,我也更新了.如果您使用:

export default class BaseComponent

您还需要使用import而不是require,所以:

import BaseComponent from './BaseComponent'

代替

var BaseComponent = require('./BaseComponent')

使用这个正则表达式替换它到处:replace:var ([\w-_]+?) = require\('([\w-_.\/]+?)'\); with:import $1 from '$2';