Reactjs geben Fehler Uncaught TypeError: Der Super-Ausdruck muss entweder null oder eine Funktion sein, nicht undefiniert

256

Ich benutze reagjs.

Wenn ich den folgenden Code ausführe, sagt der Browser:

Nicht erfasster TypeError: Der Super-Ausdruck muss entweder null oder eine Funktion sein, nicht undefiniert

Irgendwelche Hinweise, was falsch ist, wären willkommen.

Zuerst die Zeile zum Kompilieren des Codes:

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

Und der Code:

var React = require('react');

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

UPDATE: Nachdem ich drei Tage lang wegen dieses Problems im Höllenfeuer gebrannt hatte, stellte ich fest, dass ich nicht die neueste Version von reag verwendete.

Global installieren:

sudo npm install -g react@0.13.2

lokal installieren:

npm install react@0.13.2

Stellen Sie sicher, dass der Browser auch die richtige Version verwendet:

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

Hoffe, das rettet jemand anderem drei Tage kostbares Leben.

Herzog Dougal
quelle
111
Ab 0.14.8 können Sie dies immer noch erhalten, wenn Sie etwas wie extends React.component(Kleinbuchstaben c) tun .
Kevin Suttle
12
@ Kevin will nur umformulieren, im Grunde Wenn Sie dort irgendwo einen Tippfehler haben, war es in meinem Fall Componentsstatt Component :). Ihr Kommentar half BTW
P-RAD
Mein Problem war, dass ich die Klasse am Ende der Datei nicht exportierte ...
R01010010
2
Ich habe React.Components (Plural) gemacht, das rechte ist React.Component (Singular) Au gut ... wie habe ich das vermisst ...
Ismael
5
@ Kevin Suttle Ihr Kommentar ist tatsächlich nützlicher als die Antwort
Mick Jones

Antworten:

325

Klassennamen

Wenn Sie sicher sind, dass Sie von der korrekt benannten Klasse ausgehen, z. B. React.Component , nicht React.component oder React.createComponent, müssen Sie möglicherweise Ihre React-Version aktualisieren. In den Antworten unten finden Sie weitere Informationen zu den Klassen, aus denen erweitert werden soll.

Upgrade Reagieren

React unterstützt seit Version 0.13.0 nur Klassen im ES6-Stil (siehe den offiziellen Blog-Beitrag zur Support-Einführung hier) .

Vorher bei der Verwendung von:

class HelloMessage extends React.Component

Sie haben versucht, ES6-Schlüsselwörter ( extends) zu verwenden, um Unterklassen aus einer Klasse zu erstellen, die nicht mit ES6 definiert wurde class. Dies war wahrscheinlich der Grund, warum Sie auf ein seltsames Verhalten mit superDefinitionen usw. stießen.

Also, ja, TL; DR - Update auf React v0.13.x.

Zirkuläre Abhängigkeiten

Dies kann auch auftreten, wenn Sie eine zirkuläre Importstruktur haben. Ein Modul importiert ein anderes und umgekehrt. In diesem Fall müssen Sie Ihren Code nur umgestalten, um ihn zu vermeiden. Mehr Info

Jack Preston
quelle
202
Für alle anderen, die dieses Problem haben, aber das Aktualisieren von React ist nicht die Lösung - scrollen Sie weiter nach unten zu den anderen Antworten, es könnte ein einfacher Tippfehler sein. In meinem Fall war es eine Klassendefinition, die React.componentanstelle vonReact.Component
Christian Benke
1
Zu Ihrer Information, Old Way Class kann auch mit erweitert werden extends. Versuchen Sie dies var x = function(){}; class y extends x {}
Mouneer
2
Es war eine zirkuläre Importstruktur für mich. Vielen Dank, dass Sie mir viele Stunden Debugging erspart haben!
DrunkDevKek
4
Nur zur Info. Ich habe kürzlich den gleichen Fehler erhalten, obwohl ich auf ReactJS 16.x war. Es stellte sich heraus, dass ich einen Tippfehler in dieser Zeile hatte: class App extends React.Component () {...}- der korrigiert werden sollte class App extends React.Component {...} (ohne das ()am Ende)
Atlas7
1
Großbuchstabe 'C'! #facepalm
David
127

Dies bedeutet, dass Sie eine Unterklasse haben möchten, die etwas sein sollte Class, aber ist undefined. Die Gründe könnten sein:

  • Tippfehler Class extends ..., damit Sie die undefinierte Variable erweitern
  • Tippfehler import ... from, damit Sie undefinedaus dem Modul importieren
  • Das referenzierte Modul enthält nicht den Wert, den Sie importieren möchten (z. B. veraltetes Modul - Fall mit React), also importieren Sie nicht vorhandenen Wert ( undefined)
  • Tippfehler in der referenzierten Modulanweisung export ..., sodass undefinierte Variablen exportiert werden
  • referenziertes Modul fehlt überhaupt exportAnweisung, so dass es nur exportiertundefined
Vaclav Novotny
quelle
23
In meinem Fall war es eine Kleinbuchstabe von Component in React.Component.
Lernstatistiken am Beispiel
3
In meinem Fall war es eine selbst geschriebene Klasse, die nicht korrekt importiert wurde. Ich habe die standardmäßig exportierte Klasse über import {Foo} from 'bar'anstelle von importiert import Foo from 'bar'. Daher positiv bewertet.
XTRA
4
Tun Sie dies auch nicht: class Thing extends React.Component() {- Ich musste den()
activedecay
In meinem Fall wurde dieser Fehler dadurch verursacht, dass versehentlich ein Zirkelverweis durch das, was ich importierte (die Klasse, die ich auf die Unterklasse erweitern wollte), in meiner Komponenten-Renderfunktion erstellt wurde. Als ich versuchte, die Unterklasse auszuführen / zu rendern, da die Superklasse noch nicht erstellt wurde, war sie undefiniert.
Leon
^ Verursacht durch einen Zirkelverweis auch für mich.
Cailen
90

Es kann auch durch einen Tippfehler verursacht werden. Anstelle von ComponentGroßbuchstaben C haben Sie beispielsweise ein componentniedrigeres c:

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

Hinweis: Die Ursache für diesen Fehler kann sein, dass es eine gibt Reactund wir denken automatisch, dass als Nächstes eine Reaktionsmethode oder -eigenschaft beginnen sollte, die mit einem Kleinbuchstaben beginnt. Tatsächlich handelt es sich jedoch um eine andere Klasse ( Component), die mit einem Großbuchstaben beginnen sollte .

ismnoiet
quelle
2
Seltsamerweise wird dieser Fehler während des Webpack-Erstellungsschritts nicht abgefangen, aber er wird zur Laufzeit angezeigt.
worc
31

In meinem Fall war bei React-Native der Fehler, den ich hatte

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

anstatt

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';
tonatiuhnb
quelle
2
Das hat in meinem Fall funktioniert! Die Dokumentation in der
reaktionsnativen
Danke, Komponente sollte aus 'reagieren' importieren
xyz
15

Ich habe dies erlebt, als eine Exportanweisung für die JSX-Klasse fehlte.

Beispielsweise:

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

Sie können dies auch erhalten, wenn Sie versuchen, React.Componentmit einem Fehler ()in Ihrer Klassendefinition auszuführen .

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

Was ich manchmal schaffe, wenn ich von einer zustandslosen Funktionskomponente in eine Klasse konvertiere.

Adam Terlson
quelle
DAS war das Problem für mich. sehr dumm. Vielen Dank!
Erst am
14

Ich habe diesen Fehler gesehen, wenn Sie eine zirkuläre Abhängigkeit haben.

class A extends B {}
class B extends C {}
class C extends A {}
Doug
quelle
10

Für alle anderen Personen, die dieses Problem entwickeln können. Sie können auch überprüfen, ob die componentMethode in React.Componentaktiviert ist. Ich hatte das gleiche Problem und was es verursachte, war, dass ich schrieb:

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

Ich habe es geändert in

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

und alles hat gut funktioniert

Van_Paitin
quelle
6

Ich habe dies erhalten, als ich einen Tippfehler bei meinem Import hatte:

import {Comonent} from 'react';
Matthew Herbst
quelle
Ich habe dies auch mit erweiterten React.Components anstelle von React.Component (no s) erhalten.
Pierre Maoui
1
Ich habe dies auch bekommen, aber für die Eingabe eines kleinen Anfangsbuchstabens einer Komponente - ... erweitert React.component {}
Ivan Topić
5

Überprüfen Sie für die Klassen erweitern Sie tatsächlich vorhanden ist , wenige Reagieren Methoden abgeschrieben werden, es kann auch ein Typo Fehler sein 'React.Components'statt'React.Component'

Viel Glück!!

Ignatius Andrew
quelle
In meinem Fall benutzte ich React.componentanstelle von React.Component(beachte das Großbuchstaben "C", das mir fehlte)
Javis Perez
4

Ich werde eine weitere mögliche Lösung beitragen, die für mich funktioniert hat. Ich habe den Convenience-Index verwendet, um alle Komponenten in einer Datei zu sammeln.

Ich glaube nicht, dass dies zum Zeitpunkt des Schreibens offiziell von Babel unterstützt wird und das Typoskript in einen Dreh versetzt - ich habe jedoch gesehen, dass es in vielen Projekten verwendet wird und definitiv praktisch ist.

In Kombination mit der Vererbung scheint es jedoch den in der obigen Frage dargestellten Fehler zu werfen.

Eine einfache Lösung besteht darin, dass Module, die als übergeordnete Elemente fungieren, direkt anstatt über eine Convenience-Indexdatei importiert werden müssen.

./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 {        
}
Chris
quelle
Dies half mir herauszufinden, was ich falsch gemacht habe. Der Komponentenname wurde versehentlich in {} in meiner Importanweisung eingeschlossen. Subtiler Unterschied. Kann schwierig sein, diesen Fehler zu erkennen.
Dennis W
4

Das hat bei mir funktioniert:

import React, {Component} from 'react';
Armen
quelle
4

Webpack 4 Chunks and Hashes mit Uglification von TerserPlugin

Dies kann auftreten, wenn Webpack Chunks und Hashes mit Minimierung und Freigabe über TerserPlugin (derzeit in Version 1.2.3) verwendet. In meinem Fall wurde der Fehler durch das Terser-Plugin meines vendors.[contenthash].jsBundles, das meine enthält , auf die Hässlichkeit eingegrenztnode_modules . Alles hat funktioniert, wenn keine Hashes verwendet wurden.

Die Lösung bestand darin, das Bündel in den Uglifizierungsoptionen auszuschließen:

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

Mehr Info

Anders Steinrud
quelle
Dies löste zwar das Problem für mich, aber ich konnte den Schuldigen genau bestimmen und am Ende die Hässlichkeit anwenden. Siehe meine Antwort - reagieren-blenden.
Erez Cohen
Ich habe mich auf das Terser-Plugin beschränkt und schließlich das React-Script auf Version 3.2.0 geändert, um das Problem für mich zu beheben.
Avck
3

Ich habe das gleiche Problem, wechseln Sie einfach von Navigatorzu{Navigator}

import Navigator from 'react-native-deprecated-custom-components'
// to
import {Navigator} from 'react-native-deprecated-custom-components'
Mike Nguyen
quelle
1
im export Foo ... import { Foo }export default Foo ... import Foo
grunde
3

Nicht korrekt für diese Antwort, aber für andere mit demselben Fehler könnte mein lächerlich dummer Fehler möglicherweise helfen.

Dummerweise verwendete mein Problem die Funktionsnotation, indem ich () nach dem Klassennamen einfügte .

Stellen Sie sicher, dass Ihre Syntax korrekt ist. Und Sie haben alle externen Komponenten / Module mit den richtigen Namen und Pfaden importiert und exportiert.

Diese Vorlage sollte einwandfrei funktionieren, wenn Sie eine neue Version von react installiert haben:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 
Harry
quelle
3

Meine Bedingungen

  • Create-React-App
  • React-Skripte v3.2
  • Froala Rich Text Editor v3.1
  • Der Entwicklungsmodus hat gut funktioniert
  • Der Produktionsaufbau wurde mit dem in der Frage genannten Fehler unterbrochen

Lösung für mein Problem

Froala auf v3.0 herabstufen.

Etwas in Version 3.1 hat unseren Build React App-Erstellungsprozess unterbrochen.

Update: Verwenden Sie React Scripts v3.3

Wir haben festgestellt, dass zwischen React Scripts 3.2 und Froala 3.1 ein Problem aufgetreten ist.

Durch die Aktualisierung auf React Scripts v3.3 konnten wir ein Upgrade auf Froala 3.1 durchführen.

Daniel Tonon
quelle
1
Ich liebe dich. Ich möchte kommen, um dich zu finden und deine Füße zu küssen !!!!!!!!!!!!!!!!!!!!!!!!!!! (Nightmare All-Nighter vorbei)
GaddMaster
Ich verwende nicht die App "React React", sondern habe das gleiche Problem bei Prod mit Froala 3.1. Können Sie hier erklären, worum es ging?
Karan Jariwala
2

Ich habe geschrieben

React.component

stattdessen React.Component war das mein Problem)) und suchte dies mehr als eine halbe Stunde.

Руслан
quelle
2

In meinem Fall habe ich verwendet:

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

was falsch aber richtig war ist:

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

Stellen Sie außerdem sicher, dass
React.Component
NICHT
ˣ React.componentoder vorhanden istReact.Components

Kush Gautam
quelle
Willkommen bei SO. Es scheint klar, dass das OP diesen Fehler nicht begangen hat, da es bereits die richtige Form in die Frage aufgenommen hat. Haben Sie den gleichen Fehler wie OP erhalten, aber mit einer anderen Ursache?
Eduardo
Ja, ich habe den gleichen Fehler wie OP erhalten, aber ich habe festgestellt, dass die Ursache anders war, und hoffe, dass dies anderen hilft.
Kush Gautam
2

Möglicherweise verursacht dies ein Paket eines Drittanbieters. In unserem Fall war es reaktionsblend . Wir haben ähnliche Einstellungen wie @steine ​​( siehe diese Antwort oben ).

Um das problematische Paket zu finden, habe ich den Webpack-Build lokal im Produktionsmodus ausgeführt und konnte so das problematische Paket im Stack-Trace finden. Für uns war dies die Lösung und ich konnte die Hässlichkeit beibehalten.

Erez Cohen
quelle
1

Bei Verwendung von Babel (5.8) wird der gleiche Fehler angezeigt, wenn ich versuche, den Ausdruck export defaultin Kombination mit einem anderen zu verwenden export:

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

Hier ist eine Antwort:

import React, { Component } from 'react'; // NOT 'react-dom'
Viktor Velev
quelle
genau mein Tippfehler
Evandro Pomatti
1

In meinem Fall habe ich diesen Fehler durch Ändern export default class yourComponent extends React.Component() {}in behoben export default class yourComponent extends React.Component {}. Ja, die Klammer löschen hat ()den Fehler behoben.

Jeff Tian
quelle
1

Beim Importieren von Komponenten ist Folgendes aufgetreten:

import React, { Components } from 'react';

anstatt

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

Wenn Sie beim Importieren oder bei der Klassengenerierung einen Tippfehler haben, kann dies einfach der Fall sein.

HoCo_
quelle
1

Wechseln import React from 'react-domzu import React, {Component} from 'react'
und ändern class Classname extends React.Componentzu class Classname extends Component
Wenn Sie die neueste Version von React verwenden (16.8.6 ab sofort) .

Neeraj Sewani
quelle
0

Wenn Sie diesen Fehler erhalten und Browserify und browserify-shim verwenden (wie bei einer Grunt-Aufgabe), haben Sie möglicherweise einen dummen Moment wie ich erlebt, in dem Sie es ungewollt gesagt habenbrowserify-shim , React als bereits Teil des globalen Namespace zu behandeln (z. B. von einem CDN geladen).

Wenn Browserify React als Teil der Transformation und nicht als separate Datei enthalten soll, stellen Sie sicher, dass die Zeile "react": "global:React"nicht in dem "browserify-shim"Abschnitt in Ihrer packages.jsonDatei angezeigt wird .

Lachlan McD.
quelle
Wie vermeiden Sie Uncaught Error: Cannot find module 'react'nach dem Entfernen der browserify-shim-Konfiguration? Grundsätzlich möchte ich weiterhin als externe Abhängigkeit reagieren, aber browserify scheint nicht zu verstehen, wie das Bundle erstellt und React extern gehalten wird. Dies kann daran liegen, dass das Modul, das ich in meinen browserify-Einstiegspunkt einbinde, als Abhängigkeit reagiert hat.
dmarr
FWIW, das Entfernen der Reaktion aus der browserify-shim-Konfiguration und das Abgleichen der Abhängigkeit durch browserify führen normalerweise immer noch zum Problem des OP.
dmarr
0

Dies kann auch passieren, wenn Sie requireanstelle importIhres Codes verwendet haben.

Bhagyas
quelle
0

Ist mir auch passiert, als ich das benutzt habe:

class App extends React.Component(){

}

Anstelle des richtigen:

class App extends React.Component{

}

Hinweis: - () in der ersten, die die Hauptursache für dieses Problem ist


quelle
0

Für diejenigen, die verwenden react-native:

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

kann diesen Fehler verursachen.

Während die reactdirekte Referenzierung der stabilere Weg ist:

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

In meinem Fall war es die Änderung von React.Element in React.Component, die diesen Fehler behebt.

Skorphen
quelle