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

Question

我正在使用 ReactJS。

当我运行浏览器下面的代码说：

Uncaught TypeError: Super expression must either 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>;
  }
}

更新：这个问题在hellfire中烧了三天后发现我用的不是最新版的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>

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

Answer 1

Class 姓名

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

升级 React

React 从 0.13.0 版本开始只支持 ES6-style classes（支持介绍见官方博客posthere.

在此之前，使用时：

class HelloMessage extends React.Component

您试图使用 ES6 关键字 (extends) 从未使用 ES6 class 定义的 class 子class。这可能就是为什么您运行陷入具有 super 定义等的奇怪行为的原因

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

循环依赖

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

Answer 2

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

如果您希望 Browserify 将 React 作为转换的一部分，而不是一个单独的文件，请确保 "react": "global:React" 行没有出现在 [=13= 的 "browserify-shim" 部分中] 文件。

Answer 3

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

例如：

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

Answer 4

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

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

Answer 5

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

Class extends ... 中的拼写错误，因此您扩展了未定义的变量
import ... from 中的拼写错误，因此您从模块

undefined

引用的模块不包含该值，您需要导入（例如过时的模块 - React 的情况），因此您导入了不存在的值 (undefined)
引用模块 export ... 语句中的拼写错误，因此它导出未定义的变量
引用的模块完全缺少 export 语句，因此它仅导出 undefined

Answer 6

使用 Babel (5.8) 如果我尝试将表达式 export default 与其他一些 export:

结合使用，我会得到同样的错误

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

Answer 7

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

祝你好运！！

Answer 8

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

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

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

Answer 9

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

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

Answer 10

在我的例子中，使用 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 11

当我在导入时出现错字时得到了这个：

import {Comonent} from 'react';

Answer 12

也可能是拼写错误造成的，所以大写 C 不是 Component，而是小写 c 的 component，例如：

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

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

Answer 13

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

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

我改成了

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

一切正常

Answer 14

我有同样的问题，只需将 Navigator 更改为 {Navigator}

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

Answer 15

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

Answer 16

我写了

React.component

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

Answer 17

我用这个的时候也遇到过:

class App extends React.Component(){

}

而不是正确的：

class App extends React.Component{

}

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

Answer 18

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

愚蠢的是，我的问题是 通过在 class 名称 后面包含 () 来使用函数符号。

确保您的语法正确。并且您已使用正确的名称和路径导入和导出任何外部 components/modules。

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

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass

Answer 19

在我的例子中，我使用的是：

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

Answer 20

对于使用 react-native 的用户：

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

可能会产生此错误。

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

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

Answer 21

在我的例子中，是 React.Element 更改为 React.Component 修复了这个错误。

Answer 22

这是一个答案：

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

Answer 23

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

Answer 24

另一个 Expo/react-native 使用 typescript 的事件：有时当您在打包过程中重新编译 typescript 文件时，react packager 会丢失。

使我的应用再次运行的唯一方法是清除缓存；如果您使用的是 expo cli，则可以按 R（即大写 'R'）；这将重建整个包。有时切换到开发模式也有帮助....

Answer 25

就我而言，我使用的是具有对等依赖项的 npm 模块。该错误是由于模块的 webpack 配置中的错误 'external' 配置引起的：

  externals: {
    react: 'react',
    react: 'prop-types',
  },

应该是：

externals: {
    react: 'react',
    ['prop-types']: 'prop-types',
  },

Answer 26

我遇到这个问题是因为我的 react 和 react-dom 版本在合并后不匹配。

我通过手动输入我想要的版本号和 re-running npm install.

修复了它

Answer 27

就我而言，事实证明 React <15.3.0 不包含 React.PureComponent。所以代码如下：

class MyClass extends React.PureComponent {
    //...
}

不行。

Answer 28

我在导入如下组件时遇到此错误：

import React, { Components } from 'react';

而不是

import React, { Component } from 'react';

Answer 29

这对我有用：

import React, {Component} from 'react';

Answer 30

看看您的输入或 class 代是否有打字错误，可能就是这样。

Answer 31

我忘记了default。所以我写了 export class MyComponent 而不是 export default class MyComponent

Answer 32

如果您是运行开发者观察模式，请停止并重建。我将一个 ES6 模块转换为一个 React 组件，它只在重建后工作（与手表构建相比）。

Answer 33

通过 TerserPlugin 进行丑化的 Webpack 4 块和哈希

当 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

Answer 34

可能是第三方软件包导致的。在我们的例子中是 react-dazzle。我们的设置与@steine () 的设置相似。

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

Answer 35

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

Answer 36

我看到这个错误是由于 webpack 生成的包中的 'comments' 引起的。在 webpack.config.js 中使用 'pathinfo'= true 会导致此问题：

webpack.config.js

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

'pathinfo' defaults to true in development and false in production mode. https://webpack.js.org/configuration/output/#outputpathinfo Try setting this value to false to resolve the issue.

如果您没有使用插件从构建输出中删除注释，也会发生这种情况。尝试使用 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
          }
        }
      }),
    )],
  }
}

Answer 37

我的条件

创建 React-App
React-scripts v3.2
Froala富文本编辑器v3.1
开发模式运行良好
生产构建因问题中提到的错误而中断

解决我的问题

将 Froala 降级到 v3.0。

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

更新：使用 react scripts v3.3

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

更新到 React Scripts v3.3 使我们能够升级到 Froala 3.1。

Answer 38

当我尝试在父 class 和子上使用 react-i18next 的 Translation 时，我得到了这个。它被翻译了两次！

Answer 39

最初我尝试 从 'react';

导入 React, {Components}

我没注意到我们只需要扩展 {Component}

Answer 40

问题似乎是 React.Components 而不是 React.Component.

另外，ReactDOM.render(, YourNode) 是你写的吗？

希望您的问题得到解决。干杯！

Answer 41

组件名称中可能存在 spelling/case 错误：例如：

class HelloMessage extends React.Component

class HelloMessage extends React.component

请检查。

Answer 42

在我的案例中，问题是因为将子 class 导入父：

在子文件中：

class Child extends Parent {
   constructor();
}

在父文件中：

import Child from 'my_path';

class Parent {
   constructor();
}

删除子导入后问题已解决。

Answer 43

我有同样的问题因为'react-moment'

替换为'moment'库

Answer 44

在我们的例子中，我们试图扩展只有静态函数的父 class。即

Parent {
  static something() {
  }
}

Child extends Parent {
}

向 Parent 添加构造函数解决了问题。

Parent {
  constructor() {}

  static something() {
  }
}

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