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

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.

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

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

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 .

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

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

Beispielsweise:

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

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.

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 {}

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

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

import {Comonent} from 'react';

Ü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!!

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 {        
}

Das hat bei mir funktioniert:

import React, {Component} from 'react';

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

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'

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 

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.

Ich habe geschrieben

React.component

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

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

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.

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() {}

Hier ist eine Antwort:

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

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.

Beim Importieren von Komponenten ist Folgendes aufgetreten:

import React, { Components } from 'react';

anstatt

import React, { Component } from 'react';

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

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) .

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 .

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

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

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

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