reactjs gibt Fehler aus Nicht erfasste TypeError: Der Superausdruck muss entweder null oder eine Funktion sein, nicht undefiniert

Dies bedeutet, dass Sie eine Unterklasse wünschen, die Class sein sollte, aber undefined ist. Die Gründe könnten sein:

• tippfehler in Class extends ..., damit Sie eine undefinierte Variable erweitern
• tippfehler in import ... from, so importieren Sie undefined aus dem Modul
• das referenzierte Modul enthält nicht den Wert, den Sie importieren möchten (z. B. veraltetes Modul - Fall mit React), sodass Sie nicht vorhandenen Wert importieren (undefined).
• tippfehler in der export ...-Anweisung des referenzierten Moduls, sodass nicht definierte Variablen exportiert werden
• referenziertes Modul fehlt export-Anweisung, daher wird nur undefined exportiert

Es kann auch durch einen Tippfehler verursacht werden. Anstelle von Component mit Großbuchstabe C haben Sie component mit niedrigerem c. Beispiel: 

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

Hinweis: Die Ursache für diesen Fehler kann sein, dass es React gibt und wir automatisch davon ausgehen, dass eine Reaktormethode oder -eigenschaft, die mit einem Kleinbuchstaben beginnt, sein sollte. In Wirklichkeit handelt es sich jedoch um eine andere Klasse (Component), die mit einem Großbuchstaben beginnen sollte.

In meinem Fall war der Fehler bei Reactor-native der, 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, wenn eine Exportanweisung für die JSX-Klasse fehlt.

Zum Beispiel:

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

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 kann dies zu Problemen führen. Sie können auch überprüfen, ob die component-Methode in React.Component großgeschrieben ist. Ich hatte das gleiche Problem und was war der Grund dafür, dass ich schrieb:

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

Ich habe es geändert

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

und alles hat gut funktioniert

Sie können dies auch erhalten, wenn Sie versuchen, React.Component mit einem fehlerhaften () 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 bekam das, als ich einen Tippfehler bei meinem Import hatte:

import {Comonent} from 'react';

Überprüfen Sie, ob die Klassen, die Sie erweitern, tatsächlich vorhanden sind. Einige React Methoden sind veraltet. Es kann sich auch um einen Tippfehler handeln 'React.Components' Anstelle von 'React.Component'.

Viel Glück!!

Ich werde eine weitere mögliche Lösung einbringen, 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 wirft TypeScript auf den Kopf - allerdings habe ich es in vielen Projekten gesehen und ist definitiv praktisch. 

Bei Verwendung in Kombination mit 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 importiert werden müssen, anstatt über eine Indexdatei mit Komfort. 

./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 für mich funktioniert:

import React, {Component} from 'react';

Ich habe dasselbe Problem, ändere einfach von Navigator zu {Navigator}

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

Möglicherweise wurde dies durch ein Paket eines Drittanbieters verursacht. In unserem Fall war es blenden . 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. Also für uns das war die Lösung und ich konnte die Hässlichkeit aufrechterhalten.

Ich habe geschrieben

React.component

statt React.Component Das war mein Problem)) und suchte mehr als eine halbe Stunde.

In meinem Fall habe ich diesen Fehler behoben, indem export default class yourComponent extends React.Component() {} in export default class yourComponent extends React.Component {}..__ geändert wurde. Ja Die Klammer löschen () hat den Fehler behoben.

Prüfen Sie, ob Sie einen Tippfehler in Ihrem Import oder Ihrer Klassengenerierung haben. 

import React from 'react-dom in import React, {Component} from 'react' ändern
Und class Classname extends React.Component in class Classname extends Component ändern
Wenn Sie die neueste Version von React verwenden (ab 16.8.6) .

Mit Babel (5.8) erhalte ich dieselbe Fehlermeldung, wenn ich versuche, den Ausdruck export default in Kombination mit einer anderen export zu verwenden:

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

Beim Importieren einer Komponente ist dieser Fehler aufgetreten: 

import React, { Components } from 'react';

anstatt 

import React, { Component } from 'react';

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

Dummerweise war mein Problem Verwendung der Funktionsnotation durch einschließen () hinter dem Klassennamen . 

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

Diese Vorlage sollte funktionieren, wenn Sie eine neuere Version von reag installiert haben:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Hier ist eine Antwort:

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

In meinem Fall habe ich verwendet:

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

was falsch war aber richtig ist:

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

stellen Sie auch sicher, dass es gibt 
√ React.Component
NICHT 
ˣ React.component oder React.Components

Wenn Sie einen Dev-Watch-Modus ausführen, halten Sie an und bauen Sie neu auf. Ich habe ein ES6-Modul zu einer React-Komponente konvertiert und es funktionierte nur nach einem Rebuild (im Vergleich zu einem Watch-Build).

Ist mir auch passiert, als ich das benutzt habe:

class App extends React.Component(){

}

Anstelle des Richtigen:

class App extends React.Component{

}

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

Webpack 4 Chunks und Hashes mit Uglification durch TerserPlugin

Dies kann vorkommen, wenn Webpack Chunks und Hashes mit Minification und Unlification über TerserPlugin (derzeit Version 1.2.3) verwendet. In meinem Fall wurde der Fehler auf die Verengung durch das Terser Plugin meines vendors.[contenthash].js-Bundles beschränkt, das meinen node_modules enthält. Alles funktionierte, wenn keine Hashes verwendet wurden.

Die Lösung bestand darin, das Bundle 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

In meinem Fall war es die Änderung von React.Element in React.Component, die den Fehler behoben hat.

In meinem Fall verwendete ich ein npm-Modul mit Peer-Abhängigkeiten. Der Fehler wurde durch die falsche "externe" Konfiguration in der Webpack-Konfiguration des Moduls verursacht:

  externals: {
    react: 'react',
    react: 'prop-types',
  },

Es sollte sein:

externals: {
    react: 'react',
    ['prop-types']: 'prop-types',
  },

Ein anderes Vorkommen bei Expo/React-native mit TypeScript: Wenn Sie die TypeScript-Dateien mitten in einer Verpackung neu kompilieren, geht der Reakt-Packager verloren.

Die einzige Möglichkeit, meine App erneut auszuführen, besteht darin, den Cache zu leeren. Wenn Sie das Expo Cli verwenden, können Sie R drücken (das ist ein GROSSBUCHSTABEN 'R'); Dadurch wird das gesamte Bundle neu erstellt. Manchmal hilft auch das Umschalten in den Entwicklungsmodus ....

Für diejenigen, die react-native verwenden:

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

kann diesen Fehler erzeugen.

Die direkte Referenzierung von react ist der stabilere Weg:

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

Für mich habe ich default vergessen. Also schrieb ich export class MyComponent anstelle von export default class MyComponent

Ich hatte dieses Problem, da meine Versionen von react und react-dom nach einer Zusammenführung nicht übereinstimmten.

Ich habe das Problem behoben, indem ich die gewünschte Versionsnummer manuell eingegeben habe und npm install erneut ausgeführt habe.

In meinem Fall stellte sich heraus, dass React <15.3.0 React.PureComponent nicht enthält. Also Code wie:

class MyClass extends React.PureComponent {
    //...
}

würde nicht funktionieren.

Dies kann auch passieren, wenn Sie require anstelle von import in Ihrem Code verwendet haben.

Wenn Sie diese Fehlermeldung 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 ungewollt browserify-shim aufgefordert haben, React als bereits zu behandeln Teil des globalen Namespaces (z. B. von einem CDN geladen).

Wenn Sie möchten, dass Browserify React als Teil der Transformation und keine separate Datei enthält, stellen Sie sicher, dass die Zeile "react": "global:React" nicht im Abschnitt "browserify-shim" Ihrer packages.json-Datei angezeigt wird.