reactjs给出错误Uncaught TypeError:超级表达式必须为null或函数,而不是未定义

Question

我正在使用reactjs.

当我运行下面的代码时,浏览器会说:

未捕获的TypeError:超级表达式必须为null或函数,而不是未定义

任何有关错误的提示都将受到赞赏.

首先是用于编译代码的行:

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

和代码:

var React = require('react');

class HelloMessage extends React.Component {
  render() {
    return <div>Hello </div>;
  }
}

更新:在这个问题上在地狱火中燃烧了三天后,我发现我没有使用最新版本的反应.

全球安装:

sudo npm install -g react@0.13.2

在本地安装:

npm install react@0.13.2

确保浏览器也使用正确的版本:

<script type="text/javascript" src="react-0.13.2.js"></script>

希望这可以拯救别人三天的宝贵生命.

Answer 1

班级名称

首先,如果您确定要从正确命名的类扩展,例如React.Component,而不是React.component或React.createComponent,则可能需要升级React版本.有关要扩展的类的更多信息,请参阅下面的答案.

升级React

自版本0.13.0起,React仅支持ES6风格的类(请参阅此处有关支持介绍的官方博客文章.

在此之前,使用时:

class HelloMessage extends React.Component

您试图使用ES6关键字(extends)从未使用ES6定义的类中继承子类class.这可能是您遇到super定义等奇怪行为的原因.

所以,是的,TL; DR - 更新到React v0.13.x.

循环依赖

如果您具有循环导入结构,也会发生这种情况.一个模块导入另一个模块,反之亦然.在这种情况下,您只需要重构代码以避免它.更多信息

Answer 2

这意味着你想要子类,应该是Class,但是undefined.原因可能是:

• 错字输入Class extends ...,所以你扩展未定义的变量
• 错字输入import ... from,所以你undefined从模块导入
• 引用模块不包含值,您想要导入(例如过时模块 - 使用React的情况),因此您导入非现有值(undefined)
• 参考模块export ...语句中的拼写错误,因此它导出未定义的变量
• 引用模块缺少export语句,所以它只导出undefined

Answer 3

它也可能是由拼写错误引起的,所以不是Component使用大写C,而是component使用较低的c,例如:

React.component //wrong.
React.Component //correct.

注意: 此错误的来源可能是因为存在React并且我们自动认为接下来的应该是以小写字母开头的react方法或属性,但实际上它是另一个Class(Component)应该以大写字母开头.

Answer 4

在我的情况下,使用react-native,错误就是我所拥有的

import React, {
  AppRegistry,
  Component,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

代替

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';

Answer 5

我在错过JSX类的导出语句时遇到过这种情况.

例如:

class MyComponent extends React.Component {
}
export default MyComponent // <- add me

Answer 6

如果您尝试在类定义中执行React.Component错误(),也可以收到此信息.

export default class MyComponent extends React.Component() {}
                                                        ^^ REMOVE

当我从无状态功能组件转换为类时,我有时会设法做到这一点.

Answer 7

当你有一个循环依赖时,我已经看到了这个错误.

class A extends B {}
class B extends C {}
class C extends A {}

Answer 8

对于任何其他人,可能会出现这个问题.您还可以检查component方法React.Component是否为大写.我有同样的问题,导致它的原因是我写的:

class Main extends React.component {
  //class definition
}

我改成了

class Main extends React.Component {
  //class definition
}

一切都运作良好

Answer 9

带有 Uglification 的 Webpack 4 Chunks 和 Hashes by TerserPlugin

当 Webpack 通过 TerserPlugin（当前版本为 1.2.3）使用块和散列进行缩小和非放大时，可能会发生这种情况。在我的情况下，错误被缩小到我的vendors.[contenthash].js包的 Terser 插件的丑化，该插件包含我的node_modules. 不使用哈希时一切正常。

解决方案是在丑化选项中排除捆绑：

optimization: {
  minimizer: [
    new TerserPlugin({
      chunkFilter: (chunk) => {
        // Exclude uglification for the `vendors` chunk
        if (chunk.name === 'vendors') {
          return false;
        }
        return true;
      },
    }),
  ],
}

更多信息

Answer 10

我将提供另一种可能的解决方案，一个对我有用的解决方案。我使用便利索引将所有组件收集到一个文件中。

在撰写本文时，我不相信 babel 正式支持这一点，并且使打字稿陷入困境 - 但我已经看到它在许多项目中使用，并且绝对很方便。

但是，当与继承结合使用时，它似乎会引发上述问题中出现的错误。

一个简单的解决方案是，对于充当父模块的模块，需要直接导入，而不是通过方便的索引文件。

./src/components/index.js

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

./src/components/com-1/Com1.js

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

./src/components/com-3/Com3.js

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

./src/components/com-3/Com3.js

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

Answer 11

当我输入输入错误时,我得到了这个:

import {Comonent} from 'react';

Answer 12

检查您扩展的类实际存在,很少有React方法被折旧,它也可能是Typo错误'React.Components'而不是'React.Component'

祝好运!!