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.
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
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 doncundefinedà 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
exportinstruction du tout, donc il exporte justeundefined
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.
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 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
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, 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é
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.
Je l'ai eu quand j'ai eu une faute de frappe sur mon import:
import {Comonent} from 'react';
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!!
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 {
}
Cela a fonctionné pour moi:
import React, {Component} from 'react';
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'
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.
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.
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.
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.
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) .
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() {}
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';
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
Voici une réponse:
import React, { Component } from 'react'; // NOT 'react-dom'
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
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).
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
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;
},
}),
],
}
Dans mon cas, c’est React.Element qui a changé pour React.Component qui corrige cette erreur.
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',
},
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 ....
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';
Pour moi, j'ai oublié default. J'ai donc écrit export class MyComponent au lieu de export default class MyComponent
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.
Dans mon cas, React <15.3.0 ne comprend pas React.PureComponent. Donc, code comme:
class MyClass extends React.PureComponent {
//...
}
ne fonctionnerait pas.
Cela peut également arriver si vous avez utilisé require au lieu de import dans votre code.
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.