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

J'utilise reactjs.

Lorsque j'exécute le code ci-dessous, le navigateur dit:

TypeError non capturé: la super expression doit être nulle ou une fonction, non indéfinie

Tout indice sur ce qui ne va pas serait apprécié.

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é dans hellfire pendant trois jours sur ce problème, j'ai constaté que je n'utilisais pas la dernière version de react.

Installez globalement:

sudo npm install -g react@0.13.2

installer localement:

npm install react@0.13.2

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.

Noms de classe

Premièrement, si vous êtes certain que vous étendez à partir de la classe correctement nommée, par exemple React.Component , pas 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.

Upgrade React

React ne prend en charge que les classes de style ES6 depuis la version 0.13.0 (voir leur 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 à partir d'une classe qui n'était pas définie à l'aide d'ES6 class. C'est probablement pourquoi vous avez eu un comportement étrange avec les superdéfinitions, 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

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

• faute de frappe Class extends ..., donc vous étendant la variable non définie
• typo in import ... from, donc vous importez undefineddu module
• le module référencé ne contient pas la valeur, vous voulez importer (par exemple module obsolète - cas avec React), donc vous importez une valeur non existante ( undefined)
• faute de frappe dans la export ...déclaration du module référencé , il exporte donc une variable non définie
• module manquant exportdu tout référencé , donc il exporte justeundefined

Cela peut également être causé par une erreur de frappe, donc au lieu de ComponentC majuscule, vous avez componentavec c inférieur, par exemple:

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

Remarque: La source de cette erreur est peut-être parce qu'il y a Reactet nous pensons automatiquement que ce qui vient ensuite devrait être une méthode ou une propriété de réaction commençant par une lettre minuscule, mais en fait c'est une autre classe ( Component) qui devrait commencer par une lettre majuscule .

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';

J'ai vécu cela en manquant une instruction d'exportation pour la classe JSX.

Par exemple:

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

Vous pouvez également le recevoir si vous essayez de l'exécuter React.Componentavec une erreur ()dans votre définition de classe.

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

Ce que j'arrive parfois à faire lorsque je convertis un composant fonctionnel sans état en classe.

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

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

Pour toute autre personne, qui peut développer ce problème. Vous pouvez également vérifier que la componentméthode en React.Componentest en majuscule. J'ai eu le même problème et ce qui l'a causé, c'est que j'ai écrit:

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

Je l'ai changé en

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

et tout a bien fonctionné

J'ai obtenu ceci quand j'ai eu une faute de frappe sur mon importation:

import {Comonent} from 'react';

Vérifiez que les classes que vous étendez existent réellement, peu de méthodes React sont dépréciées, il peut également s'agir d'une erreur de frappe 'React.Components'au lieu de'React.Component'

Bonne chance!!

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

Je ne crois pas au moment de la rédaction de ce document, il est officiellement pris en charge par babel, et jette une frappe typographique - mais je l'ai vu utilisé dans de nombreux projets et est certainement 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 est, pour les modules qui agissent comme des parents doivent être importés directement plutôt que 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 {        
}

Cela a fonctionné pour moi:

import React, {Component} from 'react';

Webpack 4 morceaux et hachages avec uglification par TerserPlugin

Cela peut se produire lorsque Webpack utilise des morceaux et des hachages avec minification et déglification via TerserPlugin (actuellement sur la version 1.2.3). Dans mon cas, l'erreur a été réduite à l'uglification par le plugin Terser de mon vendors.[contenthash].jsbundle qui contient mon node_modules. Tout fonctionnait sans utiliser de hachage.

La solution consistait à exclure le bundle dans les options d'uglification:

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

Plus d'informations

J'ai le même problème, il suffit de passer de Navigatorà{Navigator}

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

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

Bêtement, mon problème était d' utiliser 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é tous les composants / modules externes avec les noms et chemins corrects.

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

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Mes conditions

• Create-React-App
• React-scripts v3.2
• Éditeur de texte riche Froala v3.1
• Le mode de développement a bien fonctionné
• La version de production a été rompue avec l'erreur mentionnée dans la question

Solution à mon problème

Rétrograder Froala vers la v3.0.

Quelque chose dans la v3.1 a cassé notre processus de construction de l'application Create React.

Mise à jour: utilisez les scripts React v3.3

Nous avons découvert qu'il y avait un problème entre React Scripts 3.2 et Froala 3.1.

La mise à jour de React Scripts v3.3 nous a permis de passer à Froala 3.1.

J'ai écrit

React.component

au lieu de React.Component C'était mon problème)) et cherchait cela plus d'une demi-heure.

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 également qu'il n'y a
√ React.Component
PAS
ˣ React.componentouReact.Components

Un package tiers peut être à l'origine de ce problème. Dans notre cas, c'était une réaction éblouissante . Nous avons des paramètres similaires à ceux de @steine ​​( voir cette réponse ci-dessus ).

Afin de trouver le paquet problématique, j'ai exécuté la construction du webpack localement avec le mode de production et j'ai donc pu trouver le paquet problématique dans la trace de la pile. Donc, pour nous, cela a fourni la solution et j'ai pu garder l'ugification.

En utilisant Babel (5.8), j'obtiens la même erreur si j'essaie d'utiliser l'expression export defaulten combinaison avec une autre export:

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

Voici une réponse:

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

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

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

import React, { Components } from 'react';

au lieu de

import React, { Component } from 'react';

Regardez si vous avez une erreur de frappe dans votre importation ou votre génération de classe, ce pourrait être simplement cela.

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

Si vous recevez cette erreur et utilisez Browserify et browserify-shim (comme dans une tâche Grunt), vous avez peut-être vécu un moment stupide comme je l'ai fait où vous avez involontairement dit browserify-shimde traiter React comme faisant 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 un fichier séparé, assurez-vous que la ligne "react": "global:React"n'apparaît pas dans la "browserify-shim"section de votre packages.jsonfichier.

Cela peut également se produire si vous l'avez utilisé à la requireplace de importvotre code.

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 principale cause de ce problème

Pour ceux qui utilisent react-native:

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

peut produire cette erreur.

Alors que référencer reactdirectement est la manière la plus stable de procéder:

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

Dans mon cas, c'est le changement de React.Element en React.Component qui corrige cette erreur.