超级表达式必须为null或函数，不能为undefined

小开

最佳答案

类名

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

升级的反应

React从0.13.0版本开始只支持es6风格的类(参见他们的官方博客关于支持介绍在这里的文章)。

在此之前，使用时:

class HelloMessage extends React.Component

你试图使用ES6关键字(extends)从一个没有使用ES6 class定义的类中子类化。这可能是为什么你遇到奇怪的行为与super定义等。

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

循环依赖

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

小开

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

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

小开

当JSX类缺少一个导出语句时，我就经历过这种情况。

例如:

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

小开

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

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

小开

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

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

小开

使用Babel(5.8)，如果我试图将表达式export default与其他export结合使用，则会得到相同的错误:

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

小开

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

祝你好运! !

小开

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

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

在从无状态函数组件转换到类时，我有时会设法做到这一点。

小开

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

我不相信在写这篇文章的时候，babel是官方支持的，并且会把typescript弄得一团糟——但是我在很多项目中看到过它的使用，而且肯定很方便。

然而，当与继承结合使用时，它似乎会抛出上面问题中提出的错误。

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

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

小开

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

小开

当我的导入有一个错字时，我得到了这个:

import {Comonent} from 'react';

小开

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

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

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

小开

对其他人来说，这可能会导致这个问题。你也可以检查React.Component中的component方法是否大写。我也有同样的问题，原因是我写道:

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

我把它改成

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

一切都很顺利

小开

我有同样的问题，只是改变从Navigator到{Navigator}

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

小开

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

小开

我写

React.component

而不是React.Component 这是我的问题)) 为了这个我找了半个多小时

小开

当我用这句话的时候也发生在我身上:

class App extends React.Component(){


}

而不是正确的:

class App extends React.Component{


}

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

小开

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

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

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

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

import React, { Component } from 'react'


class ExampleClass extends Component {


render(){
return(
<div>


</div>
)
}
}


export default ExampleClass

小开

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

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 < br > 不是< br > ˣReact.component或React.Components

.

小开

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

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

可能产生此错误。

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

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

小开

对我来说，是React。元素更改为React。修复此错误的组件。

小开

这里有一个答案:

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

小开

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

小开

Expo/react-native与typescript的另一种情况是:有时当你在打包过程中重新编译typescript文件时，react打包器会丢失。

让我的应用程序再次运行的唯一方法是清除缓存;如果你使用的是世博命令行，你可以按下R(大写的“R”);这将重新构建整个包。有时切换到开发模式也有帮助....

小开

在我的例子中，我使用了一个具有对等依赖关系的npm模块。该错误是由模块的webpack配置中错误的“外部”配置引起的:

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

它应该是:

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

小开

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

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

小开

在我的例子中，React <15.3.0不包括React. purecomponent。代码如下:

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

不工作。

小开

我在导入组件时遇到了这个错误，比如:

import React, { Components } from 'react';

而不是

import React, { Component } from 'react';

小开

这招对我很管用:

import React, {Component} from 'react';

小开

如果您在导入或类生成中有拼写错误，可能只是这样。

小开

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

小开

如果您正在运行开发监视模式，请停止并重新构建。我将一个ES6模块转换为一个React组件，它只在重建后工作(相对于手表构建)。

小开

Webpack 4块和哈希与TerserPlugin Uglification

当Webpack通过TerserPlugin(当前版本为1.2.3)使用块和散列并进行缩小和unlification时，就会发生这种情况。在我的情况下，这个错误被缩小到我的vendors.[contenthash].js包的Terser插件的丑陋化，它包含了我的node_modules。不使用哈希值时一切正常。

解决方案是在uglification选项中排除bundle:

optimization: {
minimizer: [
new TerserPlugin({
chunkFilter: (chunk) => {
// Exclude uglification for the `vendors` chunk
if (chunk.name === 'vendors') {
return false;
}
return true;
},
}),
],
}

更多信息

小开

可能是第三方包导致的。在本例中，它是react-dazzle。我们有类似于@steine (请看上面的答案)的设置为了找到有问题的包，我用生产模式在本地运行webpack构建，因此能够在堆栈跟踪中找到有问题的包。所以对我们来说这提供了解决方案，我能够保持丑化

小开

修改import React from 'react-dom为import React, {Component} from 'react'
并将class Classname extends React.Component更改为class Classname extends Component
如果你正在使用React(16.8.6)的最新版本

小开

我已经看到这个错误发生由于'评论'在包生成的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
}
}
}),
)],
}
}

小开

我的条件

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

解决我问题的方法

将Froala降级到3.0版本。

3.1版中的某些内容破坏了我们的Create React应用程序构建过程。

更新:使用react脚本v3.3

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

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

小开

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

小开

最初我尝试import React， {Components} from React;

我没有注意到我们必须只扩展{组件}

小开

问题似乎是这样的反应。组件，而不是React.Component.

还有，ReactDOM是你写的吗?render(， YourNode) here?

希望你的问题解决了。干杯!

小开

组件名称可能存在拼写/大小写错误: 例如:< / p >

class HelloMessage extends React.Component


class HelloMessage extends React.component

请查一下。

小开

在我的例子中，问题是因为将子类导入父类:

在子文件中:

class Child extends Parent {
constructor();
}

在父文件中:

import Child from 'my_path';


class Parent {
constructor();
}

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

小开

我也有同样的问题因为"反应时刻"

将其替换为'moment'库

小开

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

Parent {
static something() {
}
}


Child extends Parent {
}

向Parent添加一个构造函数就解决了这个问题。

Parent {
constructor() {}


static something() {
}
}