reactjs提供错误Uncaught TypeError：超级表达式必须为null或函数，且未定义

我正在使用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>;
  }
}

更新：在针对此问题的地狱之火中燃烧了三天后，我发现我没有使用最新版本的react。

全局安装：

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>

希望这可以为他人节省三天的宝贵生命。

类名

首先，如果确定要从正确命名的类扩展，例如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-更新到Reactv0.13.x。

循环依赖

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

这意味着您想要子类化某些东西，应该是Class，但是是undefined。原因可能是：

• 中的错字Class extends ...，因此您扩展了未定义的变量
• 输入错误import ... from，因此您undefined要从模块导入
• 引用的模块不包含您要导入的值（例如，过时的模块-使用React的情况），因此您导入不存在的值（undefined）
• 引用模块export ...语句中的错字，因此它会导出未定义的变量
• 引用的模块完全缺少export语句，因此仅导出undefined

它也可能是由于输入错误而引起的，因此Component您要component使用较低的c 来代替大写C，例如：

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

注意： 导致此错误的原因可能是因为存在React，我们认为接下来自动出现的应该是一个以小写字母开头的react方法或属性，但实际上是另一个Class（Component）应该以一个大写字母开头。

就我而言，使用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';

缺少JSX类的导出语句时，我遇到了这种情况。

例如：

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

如果您试图在类定义中执行React.Component错误()，也可以收到此消息。

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

从无状态功能组件转换为类时，有时可以做到这一点。

当您有循环依赖项时，我已经看到此错误。

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

对于任何其他人，可能会出现此问题。您也可以检查中的component方法React.Component是否大写。我遇到了同样的问题，导致该问题的原因是我写了：

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

我将其更改为

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

一切都很好

我在汇入输入时遇到错字：

import {Comonent} from 'react';

检查您扩展的类是否确实存在，很少使用React方法，这可能是Typo错误'React.Components'而不是'React.Component'

祝好运！！

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

我不相信在撰写本文时，它会得到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 {        
}

这为我工作：

import React, {Component} from 'react';

Webpack 4块化和哈希化，通过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;
      },
    }),
  ],
}

更多信息

我有同样的问题，只是从更改Navigator为{Navigator}

import Navigator from 'react-native-deprecated-custom-components'
// to
import {Navigator} from 'react-native-deprecated-custom-components'

这个答案不正确，但是对于其他具有相同错误的人，我可笑的愚蠢错误可能会有所帮助。

愚蠢的是，我的问题是通过在类名后面包含（）来使用函数表示法。

确保您的语法正确。并且您已经导入和导出了具有正确名称和路径的所有外部组件/模块。

如果您安装了最新版本的react，则此模板应该可以正常工作：

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

我的条件

• 创建反应应用
• 反应脚本v3.2
• Froala富文本编辑器v3.1
• 开发模式效果很好
• 生产版本因问题中提到的错误而中断

解决我的问题

将Froala降级到v3.0。

v3.1中的某个内容破坏了我们的Create React App构建过程。

更新：使用React脚本v3.3

我们发现React脚本3.2和Froala 3.1之间存在问题。

通过更新到React Scripts v3.3，我们可以升级到Froala 3.1。

我写过

React.component

而不是React.Component 那是我的问题）），并一直在寻找超过半小时的时间。

就我而言，我正在使用：

class Root extends React.Component() {
// THIS IS WORNG
// After React.Component () <- WRONG!!
}

这是错误的，但正确的是：

class Root extends React.Component {
// THIS IS CORRECT
// That -> '()' after React.Component was typo
}

也确保有
√ React.Component
不
ˣ React.component或React.Components

可能有第三方软件包导致此情况。在我们的例子中，这是令人反感的。我们的设置与@steine相似（请参见上面的答案））。

为了找到有问题的软件包，我以生产模式在本地运行了webpack构建，因此能够在堆栈跟踪中找到有问题的软件包。因此，这为我们提供了解决方案，而我得以保持丑陋的状态。

使用Babel（5.8）如果尝试将表达式export default与其他一些表达式结合使用，则会遇到相同的错误export：

export const foo = "foo"
export const bar = "bar"
export default function baz() {}

这是一个答案：

import React, { Component } from 'react'; // NOT 'react-dom'

就我而言，我通过将更export default class yourComponent extends React.Component() {}改为解决了该错误export default class yourComponent extends React.Component {}。是的，删除括号可以()解决该错误。

导入类似组件时遇到此错误：

import React, { Components } from 'react';

代替

import React, { Component } from 'react';

看看您在输入或生成类时是否有错字错误，可能就是这样。

更改import React from 'react-dom到import React, {Component} from 'react'
而变化class Classname extends React.Component，以class Classname extends Component
如果您使用的是最新版本的阵营（16.8.6截至目前）。

如果您收到此错误，并且正在使用Browserify和browserify -shim（例如在Grunt任务中），您可能会遇到一个愚蠢的时刻，就像我所做的那样，您无意间被告知browserify-shim将React视为全局名称空间的一部分（例如，从CDN加载）。

如果您希望Browserify将React作为转换的一部分而不是单独的文件，请确保该行"react": "global:React"未出现在文件的"browserify-shim"部分中packages.json。

如果您使用require而不是import在代码中，也会发生这种情况。

当我使用这个时也发生在我身上：

class App extends React.Component(){

}

而不是正确的：

class App extends React.Component{

}

注意：-（）在第一个中是导致此问题的主要原因

对于那些使用react-native：

import React, {
  Component,
  StyleSheet,
} from 'react-native';

可能会产生此错误。

而react直接引用是更稳定的方法：

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';

就我而言，正是React.Element更改为React.Component才解决了该错误。