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.
reactjs
ecmascript-6
Herzog Dougal
quelle
quelle
extends React.component
(Kleinbuchstabenc
) tun .Components
stattComponent
:). Ihr Kommentar half BTWAntworten:
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:
Sie haben versucht, ES6-Schlüsselwörter (
extends
) zu verwenden, um Unterklassen aus einer Klasse zu erstellen, die nicht mit ES6 definiert wurdeclass
. Dies war wahrscheinlich der Grund, warum Sie auf ein seltsames Verhalten mitsuper
Definitionen 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
quelle
React.component
anstelle vonReact.Component
extends
. Versuchen Sie diesvar x = function(){}; class y extends x {}
class App extends React.Component () {...}
- der korrigiert werden sollteclass App extends React.Component {...}
(ohne das()
am Ende)Dies bedeutet, dass Sie eine Unterklasse haben möchten, die etwas sein sollte
Class
, aber istundefined
. Die Gründe könnten sein:Class extends ...
, damit Sie die undefinierte Variable erweiternimport ... from
, damit Sieundefined
aus dem Modul importierenundefined
)export ...
, sodass undefinierte Variablen exportiert werdenexport
Anweisung, so dass es nur exportiertundefined
quelle
import {Foo} from 'bar'
anstelle von importiertimport Foo from 'bar'
. Daher positiv bewertet.class Thing extends React.Component() {
- Ich musste den()
Es kann auch durch einen Tippfehler verursacht werden. Anstelle von
Component
Großbuchstaben C haben Sie beispielsweise eincomponent
niedrigeres c:Hinweis: Die Ursache für diesen Fehler kann sein, dass es eine gibt
React
und 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 .quelle
In meinem Fall war bei React-Native der Fehler, den ich hatte
anstatt
quelle
Ich habe dies erlebt, als eine Exportanweisung für die JSX-Klasse fehlte.
Beispielsweise:
quelle
Sie können dies auch erhalten, wenn Sie versuchen,
React.Component
mit einem Fehler()
in Ihrer Klassendefinition auszuführen .Was ich manchmal schaffe, wenn ich von einer zustandslosen Funktionskomponente in eine Klasse konvertiere.
quelle
Ich habe diesen Fehler gesehen, wenn Sie eine zirkuläre Abhängigkeit haben.
quelle
Für alle anderen Personen, die dieses Problem entwickeln können. Sie können auch überprüfen, ob die
component
Methode inReact.Component
aktiviert ist. Ich hatte das gleiche Problem und was es verursachte, war, dass ich schrieb:Ich habe es geändert in
und alles hat gut funktioniert
quelle
Ich habe dies erhalten, als ich einen Tippfehler bei meinem Import hatte:
quelle
Ü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!!
quelle
React.component
anstelle vonReact.Component
(beachte das Großbuchstaben "C", das mir fehlte)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
./src/components/com-1/Com1.js
./src/components/com-3/Com3.js
./src/components/com-3/Com3.js
quelle
Das hat bei mir funktioniert:
quelle
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].js
Bundles, 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:
Mehr Info
quelle
Ich habe das gleiche Problem, wechseln Sie einfach von
Navigator
zu{Navigator}
quelle
export Foo ... import { Foo }
export default Foo ... import Foo
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:
quelle
Meine Bedingungen
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.
quelle
Ich habe geschrieben
stattdessen
React.Component
war das mein Problem)) und suchte dies mehr als eine halbe Stunde.quelle
In meinem Fall habe ich verwendet:
was falsch aber richtig war ist:
Stellen Sie außerdem sicher, dass
√
React.Component
NICHT
ˣ
React.component
oder vorhanden istReact.Components
quelle
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.
quelle
Bei Verwendung von Babel (5.8) wird der gleiche Fehler angezeigt, wenn ich versuche, den Ausdruck
export default
in Kombination mit einem anderen zu verwendenexport
:quelle
Hier ist eine Antwort:
quelle
In meinem Fall habe ich diesen Fehler durch Ändern
export default class yourComponent extends React.Component() {}
in behobenexport default class yourComponent extends React.Component {}
. Ja, die Klammer löschen hat()
den Fehler behoben.quelle
Beim Importieren von Komponenten ist Folgendes aufgetreten:
anstatt
quelle
Wenn Sie beim Importieren oder bei der Klassengenerierung einen Tippfehler haben, kann dies einfach der Fall sein.
quelle
Wechseln
import React from 'react-dom
zuimport React, {Component} from 'react'
und ändern
class Classname extends React.Component
zuclass Classname extends Component
Wenn Sie die neueste Version von React verwenden (16.8.6 ab sofort) .
quelle
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 haben
browserify-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 Ihrerpackages.json
Datei angezeigt wird .quelle
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.Dies kann auch passieren, wenn Sie
require
anstelleimport
Ihres Codes verwendet haben.quelle
Ist mir auch passiert, als ich das benutzt habe:
Anstelle des richtigen:
Hinweis: - () in der ersten, die die Hauptursache für dieses Problem ist
quelle
Für diejenigen, die verwenden
react-native
:kann diesen Fehler verursachen.
Während die
react
direkte Referenzierung der stabilere Weg ist:quelle
In meinem Fall war es die Änderung von React.Element in React.Component, die diesen Fehler behebt.
quelle