web-dev-qa-db-fra.com

reactjs donnant l'erreur Uncaught TypeError: la super expression doit être nulle ou une fonction, pas indéfinie

J'utilise reactjs.

Lorsque je lance le code ci-dessous, le navigateur dit:

Uncaught TypeError: La super expression doit être soit null, soit une fonction, pas indéfinie

Toute allusion à ce qui ne va pas serait appréciée.

D'abord la ligne utilisée pour compiler le code: 

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

Et le code:

var React = require('react');

class HelloMessage extends React.Component {
  render() {
    return <div>Hello </div>;
  }
}

MISE À JOUR: Après avoir brûlé pendant trois jours dans Hellfire sur ce problème, j'ai constaté que je n'utilisais pas la dernière version de react.

Installer globalement:

Sudo npm install -g [email protected]

installer localement:

npm install [email protected]

assurez-vous que le navigateur utilise également la bonne version:

<script type="text/javascript" src="react-0.13.2.js"></script>

J'espère que cela sauve quelqu'un d'autre de trois jours d'une vie précieuse.

203
Duke Dougal

Noms de classe

Tout d'abord, si vous êtes certain que vous sortez de la classe correctement nommée, par exemple. React.Component, et non React.component ou React.createComponent, vous devrez peut-être mettre à niveau votre version de React. Voir les réponses ci-dessous pour plus d'informations sur les classes à partir desquelles s'étendre.

Upgrade React

React ne prend en charge que les classes de style ES6 depuis la version 0.13.0 (voir leur article de blog officiel sur l'introduction du support ici .

Avant cela, lors de l'utilisation:

class HelloMessage extends React.Component

vous tentiez d'utiliser des mots clés ES6 (extends) pour sous-classer une classe qui n'était pas définie à l'aide de ES6 class. C’est probablement pour cette raison que vous avez eu un comportement étrange avec les définitions super, etc.

Donc, oui, TL; DR - mise à jour vers React v0.13.x.

Dépendances circulaires

Cela peut également se produire si vous avez une structure d'importation circulaire. Un module en importe un autre et inversement. Dans ce cas, il vous suffit de refactoriser votre code pour l'éviter. Plus d'informations

260
Jack Preston

Cela signifie que vous voulez quelque chose de sous-classe, qui devrait être Class, mais undefined. Les raisons pourraient être:

  • faute de frappe dans Class extends ..., donc vous étendez la variable non définie
  • faute de frappe dans import ... from, vous importez donc undefined à partir du module
  • le module référencé ne contient pas la valeur que vous souhaitez importer (par exemple, module obsolète - casse avec React), afin que vous importiez une valeur non existante (undefined)
  • faute de frappe dans l'instruction export ... du module référencé, elle exporte donc la variable non définie
  • module référencé manquant export instruction du tout, donc il exporte juste undefined
116
Vaclav

Cela peut aussi être causé par une faute de frappe. Ainsi, au lieu de Component avec C majuscule, vous avez component avec c inférieur, par exemple: 

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

Note: La source de cette erreur est peut-être parce qu'il y a React et nous pensons automatiquement que la prochaine étape devrait être une méthode ou une propriété de réaction commençant par une lettre minuscule, mais en fait Classe _ (Component) qui devrait commencer par une lettre majuscule.

84
ismnoiet

Dans mon cas, avec react-native, l’erreur était que j’avais

import React, {
  AppRegistry,
  Component,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

au lieu de 

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';
26
tonatiuhnb

J'ai vécu cette situation lorsque je manquais d'une déclaration d'exportation pour la classe JSX.

Par exemple:

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

J'ai vu cette erreur lorsque vous avez une dépendance circulaire.

class A extends B {}
class B extends C {}
class C extends A {}
11
Doug

Pour toute autre personne, cela peut développer ce problème. Vous pouvez également vérifier que la méthode component dans React.Component est en majuscule. J'ai eu le même problème et la cause en est que j'ai écrit:

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

Je l'ai changé pour

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

et tout a bien fonctionné

9
Van_Paitin

Vous pouvez également recevoir ce message si vous essayez d'exécuter React.Component avec un () erroné dans votre définition de classe. 

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

Ce que je réussis parfois à faire lorsque je convertis un composant fonctionnel sans état en classe.

9
Adam Terlson

Je l'ai eu quand j'ai eu une faute de frappe sur mon import:

import {Comonent} from 'react';
6
Matthew Herbst

Vérifiez que les classes que vous étendez existent réellement, peu de méthodes React sont amorties. Il peut également s'agir d'une erreur typographique 'React.Components' au lieu de 'React.Component'

Bonne chance!!

5
Ignatius Andrew

Je vais apporter une autre solution possible, une solution qui a fonctionné pour moi. J'utilisais l'index de commodité pour rassembler tous les composants dans un seul fichier. 

Je ne crois pas que, au moment de la rédaction de cet article, Babel le prenne officiellement en charge, et jette TypeScript dans une vrille, mais je l’ai déjà vu utilisé dans de nombreux projets et est définitivement pratique. 

Cependant, lorsqu'il est utilisé en combinaison avec l'héritage, il semble jeter l'erreur présentée dans la question ci-dessus. 

Une solution simple consiste à importer les modules qui agissent en tant que parents directement via un fichier d’index de commodité. 

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

Cela a fonctionné pour moi:

import React, {Component} from 'react';
3
Armen

J'ai le même problème, changez simplement de Navigator à {Navigator}

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

Cela pourrait être causé par un package tiers. Dans notre cas, c’était réagissait, éblouissait . Nous avons des paramètres similaires à celui de @steine ​​( voir cette réponse ci-dessus ).

Afin de trouver le paquet problématique, j'ai exécuté la compilation webpack localement avec le mode production et j'ai donc pu trouver le paquet problématique dans la trace de la pile. Donc, pour nous ceci nous avons fourni la solution et j'ai pu garder l’affaiblissement.

2
Erez Cohen

J'ai écrit

React.component

au lieu de React.Component C’était mon problème)) Et je le recherchais depuis plus d’une demi-heure.

2
Руслан

Dans mon cas, j'ai corrigé cette erreur en changeant export default class yourComponent extends React.Component() {} en export default class yourComponent extends React.Component {}. Oui, supprimer la parenthèse () a corrigé l'erreur.

1
Jeff Tian

Regardez si vous avez une faute de frappe dans votre importation ou votre génération de classe, il pourrait simplement s'agir de cela. 

1
HoCo_

Remplacez import React from 'react-dom par import React, {Component} from 'react'
Et changez class Classname extends React.Component en class Classname extends Component
Si vous utilisez la dernière version de React (16.8.6 à partir de maintenant) .

1
neer17

Utilisation de Babel (5.8) J'obtiens la même erreur si j'essaie d'utiliser l'expression export default en combinaison avec une autre export:

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

J'ai rencontré cette erreur lors de l'importation d'un composant tel que: 

import React, { Components } from 'react';

au lieu de 

import React, { Component } from 'react';
1
Ashvini Maurya

Pas correct pour cette réponse, mais pour les autres avec la même erreur, mon erreur ridiculement stupide pourrait potentiellement aider.

Stupidement, mon problème était en utilisant la notation de fonction en incluant () après le nom de la classe

Assurez-vous que votre syntaxe est correcte. Et vous avez importé et exporté des composants/modules externes avec les noms et chemins appropriés. 

Ce modèle devrait fonctionner correctement si vous avez une nouvelle version de react installée:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 
1
Harry

Voici une réponse:

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

Dans mon cas, j'utilisais:

class Root extends React.Component() {
// THIS IS WORNG
// After React.Component () <- WRONG!!
}

ce qui était faux mais correct est:

class Root extends React.Component {
// THIS IS CORRECT
// That -> '()' after React.Component was typo
}

assurez-vous aussi qu'il y a 
React.Component
NE PAS 
ˣ React.component ou React.Components

1
Kush Gautam

Si vous utilisez un mode de veille dev, arrêtez et reconstruisez. J'ai converti un module ES6 en composant React et il ne fonctionnait qu'après une reconstruction (par opposition à une génération de montre).

0
Scott Leonard

Cela m'est arrivé aussi quand j'ai utilisé ceci:

class App extends React.Component(){

}

Au lieu du bon:

class App extends React.Component{

}

Remarque: - () dans le premier qui est la cause principale de ce problème

0
sumit

Webpack 4 Morceaux et hachages avec uglification de TerserPlugin

Cela peut se produire lorsque Webpack utilise des fragments et des hachages avec minification et unglification via TerserPlugin (actuellement en version 1.2.3). Dans mon cas, l'erreur a été réduite à l'ugification par le plugin Terser de mon paquet vendors.[contenthash].js qui contient mon node_modules. Tout a fonctionné sans utiliser de hachage.

La solution consistait à exclure le paquet dans les options de modification:

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

Plus d'informations

0
steine

Dans mon cas, c’est React.Element qui a changé pour React.Component qui corrige cette erreur.

0
SkorpEN

Dans mon cas, j'utilisais un module npm avec des dépendances entre homologues. L'erreur a été causée par la mauvaise configuration 'externe' dans la configuration du pack Web:

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

CA devrait etre:

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

Une autre occurrence de Expo/react-native avec TypeScript: parfois, lorsque vous recompilez les fichiers TypeScript au milieu d’un package, celui-ci est perdu.

Le seul moyen de relancer mon application consiste à vider le cache. si vous utilisez expo cli, vous pouvez appuyer sur R (c’est un caractère majuscule «R»); cela reconstruira l'ensemble du paquet. Parfois, le passage en mode de développement aide également ....

0
andri

Pour ceux qui utilisent react-native:

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

peut produire cette erreur.

Considérant que la référence react directement est la solution la plus stable:

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

Pour moi, j'ai oublié default. J'ai donc écrit export class MyComponent au lieu de export default class MyComponent

0
Nick Manning

J'ai eu ce problème parce que mes versions react et react-dom ne correspondaient pas après une fusion.

Je l'ai corrigé en entrant manuellement le numéro de version que je voulais et en relançant npm install.

0
Rose

Dans mon cas, React <15.3.0 ne comprend pas React.PureComponent. Donc, code comme:

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

ne fonctionnerait pas.

0
Ruben Martinez Jr.

Cela peut également arriver si vous avez utilisé require au lieu de import dans votre code.

0
bhagyas

Si vous recevez cette erreur et utilisez Browserify et browserify-shim (comme dans une tâche Grunt), vous avez peut-être connu un moment stupide, comme je l'ai fait par inadvertance, lorsque vous avez dit à browserify-shim de traiter React comme déjà partie de l’espace de noms global (par exemple, chargé à partir d’un CDN).

Si vous souhaitez que Browserify inclue React dans le cadre de la transformation, et non dans un fichier séparé, assurez-vous que la ligne "react": "global:React" n'apparaît pas dans la section "browserify-shim" de votre fichier packages.json.

0
Lachlan McD.