javascript - webpack、react 和 babel : Uncaught TypeError: Super expression must either be null or a function, 未定义

Question

我正在关注这个tutorial在 webpack 上并使用react。由于对 npm 或 Node 或 react 或

的一些更新，我似乎每一个其他步骤都会遇到错误

但是这一次...我从 webpack 或 React 中收到错误:

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

代码如下:

app/index.jsx

import './main.css';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

app/components/App.jsx

import React from 'react';
import Note from './Note.jsx';

export default class App extends React.Component {
  render() {
    return <Note />;
  }
}

app/components/Note.jsx

import React from 'react';

export default () => <div>Learn Webpack!</div>

我正在使用

• react 0.14.6
• react-dom ^0.14.6
• Node 5.3.0
• npm 3.5.3
• babel-core ^6.4.5
• babel-loader ^6.2.1

提前谢谢您。

Answer 1

我已经和这个问题斗争了一段时间了。问题在于循环依赖 - 如果您有一个扩展另一个类的类，但它们都导入一个相互导入的类，那么 super 表达式将简单地解析为未定义。以下是如何触发它的示例:

A.ts

import './C';

class A extends B {
}

B.ts

import './C';

class B {
}

C.ts

import './A';

// Library code here

在这种情况下，类 A 被认为是扩展未定义，因为依赖树变成了循环(因为 C 需要 A，而 A 又需要 B，而 B 又需要 C，等等)，并且看起来引擎只是“放弃”并将父类(super class)构造函数解析为未定义。就我而言，我从 C 中移走了一些所需的功能，以便 B 不再导入它。它打破了循环依赖 - 而且它的作用就像一个魅力!