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

reactjs React.js

西门达蒙

2020-03-10

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

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

第476篇《reactjs提供错误Uncaught TypeError：超级表达式必须为null或函数，且未定义》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共17个回答
做个有心人 2020.03.10

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

猴子村村 2020.03.10

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

class App extends React.Component(){

}

而不是正确的：

class App extends React.Component{

}

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

小卤蛋十三 2020.03.10

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

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

Mandy小小西门 2020.03.10

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

十三路易 2020.03.10

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

LEYPro前端 2020.03.10

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

村村AL 2020.03.10

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

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

小碗儿 2020.03.10

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

export const foo = "foo"
export const bar = "bar"
export default function baz() {}
LEY蛋蛋Near 2020.03.10

我写过

React.component

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

小胖Stafan 2020.03.10

我的条件

  • 创建反应应用
  • 反应脚本v3.2
  • Froala Rich Text编辑器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。

西里米亚 2020.03.10

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

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

我将其更改为

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

一切都很好

逆天西门 2020.03.10

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

例如：

class MyComponent extends React.Component {
}
export default MyComponent // <- add me
猿小胖 2020.03.10

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

class A extends B {}
class B extends C {}
class C extends A {}
Sam小哥逆天 2020.03.10

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

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

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

逆天古一 2020.03.10

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

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

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

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

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

达蒙Jim斯丁 2020.03.10

类名

首先，如果您确定要从正确命名的类扩展，例如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。

循环依赖

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android