wake-up-neo.com

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

Ich benutze Reactjs.

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

Uncught TypeError: Super-Ausdruck muss entweder null oder eine Funktion sein, nicht undefiniert

Irgendwelche Hinweise auf das, was falsch ist, würden wir begrüßen.

Zuerst die Zeile, in der der Code kompiliert wurde: 

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 dieses Problem drei Tage lang im Höllenfeuer verbrannt hatte, stellte ich fest, dass ich nicht die neueste Version von React verwendete.

Installieren Sie global:

Sudo npm install -g [email protected]

lokal installieren:

npm install [email protected]

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

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

Ich hoffe, das erspart jemandem drei Tage wertvolles Leben.

203
Duke Dougal

Klassennamen

Erstens, wenn Sie sicher sind, dass Sie die richtig benannte Klasse erweitern, z. React.Component, nicht React.component oder React.createComponent. Möglicherweise müssen Sie Ihre React-Version aktualisieren. Weitere Informationen zu den Klassen finden Sie in den Antworten unten.

Upgrade-Reaktion

React unterstützt seit Version 0.13.0 nur Klassen im ES6-Stil (siehe den offiziellen Blogeintrag in der Support-Einführung hier ).

Davor bei der Verwendung von:

class HelloMessage extends React.Component

sie haben versucht, ES6-Schlüsselwörter (extends) zur Unterklasse einer Klasse zu verwenden, die nicht mit ES6 class definiert wurde. Dies war wahrscheinlich der Grund, warum Sie seltsames Verhalten mit super-Definitionen usw. hatten.

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

Zirkuläre Abhängigkeiten

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

260
Jack Preston

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
116
Vaclav

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.

84
ismnoiet

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

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

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

9
Van_Paitin

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.

9
Adam Terlson

Ich bekam das, als ich einen Tippfehler bei meinem Import hatte:

import {Comonent} from 'react';
6
Matthew Herbst

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

5
Ignatius Andrew

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

Das hat für mich funktioniert:

import React, {Component} from 'react';
3
Armen

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'
3
Mike Nguyen

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.

2
Erez Cohen

Ich habe geschrieben

React.component

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

2
Руслан

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.

1
Jeff Tian

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

1
HoCo_

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

1
neer17

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

Beim Importieren einer Komponente ist dieser Fehler aufgetreten: 

import React, { Components } from 'react';

anstatt 

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

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 
1
Harry

Hier ist eine Antwort:

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

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

1
Kush Gautam

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

0
Scott Leonard

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

0
sumit

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

0
steine

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

0
SkorpEN

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',
  },
0
David Lin

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

0
andri

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';
0
Mari Gallegos

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

0
Nick Manning

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.

0
Rose

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.

0

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

0
bhagyas

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.

0
Lachlan McD.