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版本。有关要扩展的类的详细信息，请参阅下面的答案。

升级反应

自版本0.13.0起，React仅支持ES6风格的类（请参阅支持介绍here上的官方博客文章。

在此之前，使用时：

class HelloMessage extends React.Component

您试图使用ES6关键字（extends）从未使用ES6 class定义的类中进行子类化。这可能是您使用super定义等遇到奇怪行为的原因。

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

循环依赖

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

Answer 2

这意味着你想要子类，它应该是print bin(12) # 'ob1100'，但是Class。原因可能是：

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

import ... from

引用的模块不包含值，您想要导入（例如过时的模块 - 使用React的情况），因此您导入非现有值（undefined）
引用模块undefined语句中的拼写错误，因此导出未定义的变量
引用模块完全缺少export ...语句，因此只导出export

Answer 3

它也可能是由拼写错误引起的，因此，如果Component使用大写字母C，则component具有较低的c，例如：

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

注意：这个错误的根源可能是因为有React而我们自动认为接下来应该是一个以小写字母开头的反应方法或属性，但实际上它是另一个类（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

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

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

Answer 7

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

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

当我从无状态功能组件转换为类时，我有时会这样做。

Answer 8

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

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

我把它改成了

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

一切都运作良好

Answer 9

当我输入输入错误时，我得到了这个：

import {Comonent} from 'react';

Answer 10

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

祝你好运!!

Answer 11

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

我不相信在撰写本文时这是由babel正式支持，并将打字稿投入旋转 - 但我已经看到它在许多项目中使用并且绝对方便。

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

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

<强> ./ SRC /组件/ 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 /组件/ COM-1 / Com1.js

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

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

<强> ./ SRC /组件/ COM-3 / Com3.js

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

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

<强> ./ SRC /组件/ COM-3 / Com3.js

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

// This does work
class Com3 extends Parent {        
}

Answer 12

这对我有用：

import React, {Component} from 'react';

Answer 13

我遇到同样的问题，只需从Navigator更改为{Navigator}

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

Answer 14

我的状况

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

解决我的问题

将Froala降级到v3.0。

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

更新：使用React脚本v3.3

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

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

Answer 15

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

Answer 16

可能是第三方软件包引起的。在我们的例子中是react-dazzle。我们的设置与@steine（see this answer above）相似。

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

Answer 17

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

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

确保您的语法正确无误。你已经进口了＆amp;导出具有正确名称和路径的任何外部组件/模块。

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

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass

Answer 18

我写了

React.component

而不是React.Component 这是我的问题））并且正在寻找这个半个多小时。

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

这是一个答案：

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

Answer 21

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

Answer 22

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

Answer 23

导入组件时出现此错误，如：

import React, { Components } from 'react';

而不是

import React, { Component } from 'react';

Answer 24

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

Answer 25

使用Babel（5.8）如果我尝试将表达式export default与其他export结合使用，我会收到同样的错误：

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

Answer 26

组件名称中可能存在拼写/大小写错误：例如：

class HelloMessage extends React.Component

class HelloMessage extends React.component

请检查。

Answer 27

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

另外，你在这里写了 ReactDOM.render(, YourNode) 吗？

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

Answer 28

最初我正在尝试 import React, {Components} from 'react';

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

Answer 29

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

Answer 30

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

webpack.config.js

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

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

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

就我而言，问题是因为将子类导入父类：

在子文件中：

class Child extends Parent {
   constructor();
}

在父文件中：

import Child from 'my_path';

class Parent {
   constructor();
}

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

Answer 32

我有同样的问题，因为“反应时刻”

用'moment'库替换它

Answer 33

如果您正在运行开发者监视模式，请停止并重建。我将ES6模块转换为React组件，并且仅在重建后才能正常工作（相对于观察构建）。

Answer 34

对我来说，我忘记了default。所以我写了export class MyComponent而不是export default class MyComponent

Answer 35

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

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

不会工作。

Answer 36

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

我通过手动输入我想要的版本号并重新运行npm install来修复它。

Answer 37

就我而言，我使用的是具有对等依赖关系的npm模块。该错误是由错误的“外部”错误引起的。在模块的webpack配置中配置：

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

应该是：

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

Answer 38

Expo / react-native with typescript的另一种情况：有时当你在包装中间重新编译打字稿文件时，反应包装器会丢失。

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

Answer 39

在我的情况下，React.Element更改为React.Component，修复此错误。

Answer 40

对于使用react-native的人：

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

可能会产生此错误。

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

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

Answer 41

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

class App extends React.Component(){

}

而不是正确的：

class App extends React.Component{

}

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

Answer 42

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

Answer 43

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

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

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

43 个答案:

我的状况

解决我的问题

更新：使用React脚本v3.3