ReactJS 给出错误 Uncaught TypeError: Super expression must be null or a function, not undefined答案

【问题标题】：ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefinedReactJS 给出错误 Uncaught TypeError: Super expression must be null or a function, not undefined
【发布时间】：2015-07-18 22:23:21
【问题描述】：

我正在使用 ReactJS。

当我在浏览器下面运行代码时：

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

任何关于错误的提示都将不胜感激。

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

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>

希望这可以挽救别人三天宝贵的生命。

【问题讨论】：

从 0.14.8 开始，如果您执行 extends React.component（小写 c）之类的操作，您仍然可以获得此信息。
@Kevin 只是想改写一下，基本上如果你在某处有错字，在我的情况下是Components 而不是Component :)。您的评论帮助了顺便说一句
我的问题是我没有在文件末尾导出类...
我做了 React.Components（复数），右边是 React.Component（单数）哎呀好...我怎么错过了...
@Kevin Suttle 你的评论实际上比答案更有用

标签： reactjs ecmascript-6

【解决方案1】：

类名

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

升级反应

React 从 0.13.0 版本开始只支持 ES6 风格的类（请参阅他们关于支持介绍 here 的官方博客文章。

在此之前，使用时：

class HelloMessage extends React.Component

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

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

循环依赖

如果您有循环导入结构，也会发生这种情况。一个模块导入另一个模块，反之亦然。在这种情况下，您只需要重构代码以避免它。 More info

【讨论】：

对于遇到此问题但更新 React 不是解决方案的其他所有人 - 进一步向下滚动到其他答案，这可能是一个简单的错字。在我的例子中，它是一个使用React.component 而不是React.Component的类定义
仅供参考，旧方式类也可以使用extends 进行扩展。试试这个var x = function(){}; class y extends x {}
对我来说这是一个循环导入结构。感谢您为我节省了大量的调试时间！
仅供参考。尽管我使用的是 ReactJS 16.x，但我最近遇到了同样的错误。原来我在这行有一个错字：class App extends React.Component () {...} - 应该更正为class App extends React.Component {...}（最后没有()）
大写“C”组件！ #facepalm

【解决方案2】：

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

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

【讨论】：

在我的例子中，它是 React.Component 中 Component 的小写。
在我的情况下，它是一个未正确导入的自写类。我通过import {Foo} from 'bar' 而不是import Foo from 'bar' 导入默认导出类。因此投了赞成票。
也不要这样做：class Thing extends React.Component() { -- 我必须删除 ()
在我的情况下，此错误是由于我在组件渲染函数中导入的内容（我想扩展到子类的类）意外创建了循环引用而引起的。当我尝试执行/渲染子类时，因为尚未创建超类但它尚未定义。
^ 对我来说也是循环引用造成的。

【解决方案3】：

这也可能是由拼写错误引起的，所以Component 不是大写的 C，而是component 的小写，例如：

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

注意： 这个错误的来源可能是因为有React，我们自动认为接下来应该是一个以小写字母开头的react方法或属性，但实际上它是另一个类（@ 987654325@) 应该以大写字母开头。

【讨论】：

呵呵，奇怪的是，这个错误在 webpack 构建步骤中没有被捕获，但它会在运行时出现。

【解决方案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';

【讨论】：

这在我的情况下有效！ react-native 站点中提供的文档有这个错误的例子:)

【解决方案5】：

当你有循环依赖时，我已经看到了这个错误。

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

【讨论】：

【解决方案6】：

如果您尝试在类定义中使用错误的() 执行React.Component，您也会收到此消息。

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

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

【讨论】：

这对我来说是个问题。很傻。非常感谢！

【解决方案7】：

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

例如：

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

【讨论】：

【解决方案8】：

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

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

我改成

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

一切正常

【讨论】：

【解决方案9】：

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;
      },
    }),
  ],
}

More info

【讨论】：

这确实为我解决了问题，但是我能够确定罪魁祸首，所以最后我能够应用丑化。看我的答案 - react-dazzle。
我缩小到 terser 插件，最终将 react-script 更改为 3.2.0 版解决了我的问题。

【解决方案10】：

当我在导入时出现拼写错误：

import {Comonent} from 'react';

【讨论】：

我也得到了这个扩展 React.Components 而不是 React.Component (no s)。
我也得到了这个，但要输入组件的小首字母 - ... extends React.component {}

【解决方案11】：

检查您扩展的类是否实际存在，很少有 React 方法被贬值，也可能是打字错误 'React.Components' 而不是 'React.Component'

祝你好运！！

【讨论】：

就我而言，我使用的是React.component 而不是React.Component（请注意我缺少的大写“C”）

【解决方案12】：

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

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

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

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

./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 {        
}

【讨论】：

这帮助我弄清楚我做错了什么。在我的导入语句中不小心将组件名称包含在 { } 中。细微的差别。很难发现这个错误。

【解决方案13】：

我也有同样的问题，把Navigator改成{Navigator}

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

【讨论】：

基本上应该像这样匹配：export Foo ... import { Foo } - 或 - export default Foo ... import Foo

【解决方案14】：

这对我有用：

import React, {Component} from 'react';

【讨论】：

【解决方案15】：

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

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

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

如果你安装了新版本的 react，这个模板应该可以正常工作：

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass

【讨论】：

【解决方案16】：

我的条件

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

解决我的问题

将 Froala 降级到 v3.0。

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

更新：使用 react 脚本 v3.3

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

更新到 React Scripts v3.3 允许我们升级到 Froala 3.1。

【讨论】：

我爱你。我要来找你亲你的脚！！！！！！！！！！！！！！！！！！！！！！（噩梦通宵结束）
我没有使用 create react 应用程序，但在使用 froala 3.1 的 prod 上遇到了同样的问题。你能解释一下这里的问题吗？
我有一个项目在生产中遇到同样的问题。这仅在更新内部库后发生。没有create-react-app，也没有froala。好奇是什么导致此问题仅在生产中发生。你知道有什么不同吗？
我无法回答您的任何问题。我所知道的是，在我所拥有的条件下，按照我在回答中所说的解决了我的问题。

【解决方案17】：

我写过

React.component

而不是React.Component 那是我的问题））找了半个多小时。

【讨论】：

【解决方案18】：

就我而言，我使用的是：

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

【讨论】：

欢迎来到 SO。似乎很明显 OP 没有犯这个错误，因为他们已经在问题中包含了正确的形式。您是否遇到与 OP 相同但原因不同的错误？
是的，我遇到了与 OP 相同的错误，但我发现原因不同，希望这对其他人有帮助。

【解决方案19】：

我在导入组件时遇到了这个错误：

import React, { Components } from 'react';

而不是

import React, { Component } from 'react';

【讨论】：

【解决方案20】：

可能是第三方软件包导致了这种情况。在我们的例子中是react-dazzle。我们有与@steine (see this answer above) 类似的设置。

为了找到有问题的包，我使用生产模式在本地运行了 webpack 构建，因此能够在堆栈跟踪中找到有问题的包。所以为我们this提供了解决方案，我能够保持丑化。

【讨论】：

【解决方案21】：

将import React from 'react-dom 更改为import React, {Component} from 'react'
并将class Classname extends React.Component 更改为class Classname extends Component
如果您使用的是最新版本的 React（截至目前为 16.8.6）。

【讨论】：

【解决方案22】：

使用 Babel (5.8) 如果我尝试将表达式 export default 与其他一些 export 结合使用，我会得到同样的错误：

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

【讨论】：

【解决方案23】：

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

class App extends React.Component(){

}

而不是正确的：

class App extends React.Component{

}

注意：- () 在第一个是这个问题的主要原因

【讨论】：

【解决方案24】：

这是一个答案：

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

【讨论】：

完全是我的错字

【解决方案25】：

就我而言，我通过将export default class yourComponent extends React.Component() {} 更改为export default class yourComponent extends React.Component {} 来修复此错误。是的删除括号()修复了错误。

【讨论】：

【解决方案26】：

看看你的导入或类生成是否有拼写错误，可能就是这样。

【讨论】：

【解决方案27】：

我已经看到由于 webpack 生成的包中的“cmets”而发生此错误。在 webpack.config.js 中使用 'pathinfo'= true 可能会导致此问题：

webpack.config.js

module.exports = {
  output: {
    pathinfo: true,
  }
}

'pathinfo' 在开发中默认为 true，在生产中默认为 false 模式。 https://webpack.js.org/configuration/output/#outputpathinfo 尝试将此值设置为 false 以解决问题。

如果您没有使用插件从构建输出中去除 cmets，也会发生这种情况。尝试使用 UglifyJs (https://www.npmjs.com/package/uglifyjs-webpack-plugin/v/1.3.0)：

webpack.config.js

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

module.exports = {
  ...
  optimization: {
    minimizer: [new UglifyJsPlugin(
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false
          }
        }
      }),
    )],
  }
}

【讨论】：

【解决方案28】：

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

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

【讨论】：

删除 browserify-shim 配置后如何避免Uncaught Error: Cannot find module 'react'？基本上我想保持 react 作为外部依赖，但 browserify 似乎不明白如何构建捆绑包并将 React 保持在外部。这可能是也可能不是因为我在 browserify 入口点中包含的模块已作为依赖项做出反应。
FWIW，从 browserify-shim 配置中删除 react 并让 browserify 协调依赖项通常仍然会导致 OP 的问题。

【解决方案29】：

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

【讨论】：

【解决方案30】：

对于那些使用react-native的人：

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

可能会产生此错误。

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

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

【讨论】：