webpack、react 和 babel：未捕获的 TypeError：超级表达式必须为 null 或函数，而不是未定义

Question

我在 webpack 上关注这个 tutorial 并做出反应。由于对 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>

我正在使用

• 反应 0.14.6
• react-dom ^0.14.6
• 节点 5.3.0
• npm 3.5.3
• babel-core ^6.4.5
• babel-loader ^6.2.1

提前谢谢你。

Answer 1

我一直在与这个问题作斗争。问题在于循环依赖——如果你有一个类扩展了另一个类，但它们都导入了一个相互导入的类，那么超级表达式将简单地解析为未定义。这是一个如何触发它的示例：

A.ts

import './C';

class A extends B {
}

B.ts

import './C';

class B {
}

C.ts

import './A';

// Library code here

在这种情况下，A 类被认为是扩展 undefined，因为依赖树变成了循环的（因为 C 需要 A，而 B 又需要 C，等等），看起来引擎只是简单地“放弃”并解决未定义的超类构造函数。就我而言，我从C 中移动了一些我需要的功能，这样B 就不再导入它了。它打破了循环依赖——它就像一个魅力！

Answer 2

如果通过 Terser 插件应用 Webpack 的优化时出现问题，请尝试改用 UglifyJS：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = function override(config, env) {
  config.optimization = {
    minimizer: [new UglifyJsPlugin()]
  };

  return config;
};

它对我有用。

Answer 3

我认为您需要在应用程序类中定义构造函数：

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

export default class App extends React.Component {

  constructor(props){
    super(props);
  }

  render() {
    return <Note />;
  }
}

此外，您的 Note 组件可能应该与 App 类似地设置：

import React from 'react';

export default class Note extends React.Component{

  constructor(props){
    super(props);
  }

  render() {
    return <div>Learn Webpack!</div>
  }
}