javascript - React 0.14.2 错误 - super 表达式必须为空或函数

Question

从 0.13.2 更新到 0.14.2 后出现此错误:

未捕获的 TypeError: super 表达式必须为 null 或函数，而不是对象

有several questions关于这个已经。最常见的错误是拼写错误的 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 { }

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

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

我找到了解决方案。这是因为 babel 发生了变化，我也更新了它。如果您使用:

export default class BaseComponent

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

import BaseComponent from './BaseComponent'

代替

var BaseComponent = require('./BaseComponent')

使用这个正则表达式来替换所有地方:替换:var ([\w-_]+?) = require\('([\w-_.\/]+?)'\);使用:从“$2”导入 $1；