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

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

提问by Flion

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

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

There are severalquestionsabout 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.

关于这个已经有几个问题了。最常见的错误是拼错 React.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 类与 React 0.13.x 一起使用，并且我到处都使用大写 C，并且记录 React.Component 似乎给出了适当的结果（函数 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?

经过一番搜索，我做了这 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)

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(put BaseComponent above Test class definition, no error!?)

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

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.

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

updateChanging

更新改变

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 classshould just work

也删除了错误！这意味着我现在要重构它，但它不能解决问题，因为export default class应该可以正常工作

采纳答案by Flion

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

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

回答by luanped

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 文件夹并重新安装对我有用的所有东西，也许您可​​以尝试一下？