reazione che dà errore TypeError non rilevato: l'espressione Super deve essere nulla o una funzione, non indefinita

Sto usando Reajs.

Quando eseguo il codice sotto il browser dice:

TypeError non rilevato: la super espressione deve essere nulla o una funzione, non definita

Qualsiasi suggerimento su ciò che è sbagliato sarebbe apprezzato.

Innanzitutto la riga utilizzata per compilare il codice:

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

E il codice:

var React = require('react');

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

AGGIORNAMENTO: Dopo aver bruciato all'inferno per tre giorni su questo problema, ho scoperto che non stavo usando l'ultima versione di reagire.

Installa a livello globale:

sudo npm install -g react@0.13.2

installa localmente:

npm install react@0.13.2

assicurati che anche il browser stia usando la versione giusta:

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

Spero che questo salvi a qualcun altro tre giorni di vita preziosa.

Nomi delle classi

In primo luogo, se si è certi di estendersi dalla classe denominata correttamente, ad esempio React.Component , non React.component o React.createComponent, potrebbe essere necessario aggiornare la versione di React. Vedi le risposte sotto per maggiori informazioni sulle classi da cui estendere.

Aggiorna React

React supporta solo le classi in stile ES6 dalla versione 0.13.0 (vedere il loro post sul blog ufficiale sull'introduzione al supporto qui .

Prima di ciò, quando si utilizza:

class HelloMessage extends React.Component

stavi tentando di utilizzare le parole chiave ES6 ( extends) per sottoclassare da una classe che non è stata definita usando ES6 class. Questo è probabilmente il motivo per cui hai riscontrato strani comportamenti con superdefinizioni ecc.

Quindi, sì, TL; DR : aggiorna a React v0.13.x.

Dipendenze circolari

Ciò può verificarsi anche se si dispone di una struttura di importazione circolare. Un modulo importa un altro e viceversa. In questo caso, devi solo riformattare il codice per evitarlo. Ulteriori informazioni

Questo significa che vuoi sottoclasse qualcosa, che dovrebbe essere Class, ma lo è undefined. Le ragioni potrebbero essere:

• errore di battitura Class extends ..., quindi si estende la variabile non definita
• errore di battitura import ... from, quindi si importa undefineddal modulo
• il modulo di riferimento non contiene il valore, si desidera importare (ad esempio modulo obsoleto - caso con React), quindi importare valore non esistente ( undefined)
• errore di battitura nell'istruzione del modulo di riferimento export ..., quindi esporta una variabile non definita
• exportdichiarazione mancante del modulo di riferimento , quindi esporta soloundefined

Può anche essere causato da un errore di battitura, quindi invece che Componentcon la maiuscola C, hai componentcon una c inferiore, ad esempio:

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

Nota: l'origine di questo errore potrebbe essere perché esiste Reacte pensiamo automaticamente che ciò che verrà dopo dovrebbe essere un metodo o una proprietà di reazione che inizia con una lettera minuscola, ma in realtà è un'altra Class ( Component) che dovrebbe iniziare con una lettera maiuscola .

Nel mio caso, con reattivo nativo, l'errore era che avevo

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

invece di

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';

L'ho sperimentato quando mancava una dichiarazione di esportazione per la classe JSX.

Per esempio:

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

Puoi anche riceverlo se stai tentando di eseguire React.Componentun errore ()nella definizione della tua classe.

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

Che a volte riesco a fare quando sto convertendo da un componente funzionale senza stato a una classe.

Ho visto questo errore quando hai una dipendenza circolare.

class A extends B {}
class B extends C {}
class C extends A {}

Per qualsiasi altra persona, questo potrebbe sviluppare questo problema. È inoltre possibile verificare che il componentmetodo React.Componentsia in maiuscolo. Ho avuto lo stesso problema e ciò che ha causato è stato che ho scritto:

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

L'ho cambiato in

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

e tutto ha funzionato bene

Ho avuto questo quando ho avuto un refuso sulla mia importazione:

import {Comonent} from 'react';

Verifica che le Classi che estendi esistano effettivamente, alcuni metodi React sono ammortizzati, Potrebbe anche essere un errore di battitura 'React.Components'invece di'React.Component'

In bocca al lupo!!

Contribuirò con un'altra possibile soluzione, una che ha funzionato per me. Stavo usando l'indice di convenienza per raccogliere tutti i componenti in un unico file.

Non credo che al momento della stesura di questo sia ufficialmente supportato da Babel, e getta dattiloscritto in un giro - tuttavia l'ho visto usato in molti progetti ed è sicuramente conveniente.

Tuttavia, se usato in combinazione con l'ereditarietà sembra gettare l'errore presentato nella domanda sopra.

Una soluzione semplice è che per i moduli che fungono da genitori devono essere importati direttamente anziché tramite un file indice di convenienza.

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

Questo ha funzionato per me:

import React, {Component} from 'react';

Webpack 4 blocchi e hash con Uglification di TerserPlugin

Ciò può verificarsi quando Webpack utilizza blocchi e hash con minificazione e unglification tramite TerserPlugin (attualmente nella versione 1.2.3). Nel mio caso l'errore è stato ridotto alla brutalizzazione del plugin Terser del mio vendors.[contenthash].jspacchetto che contiene il mio node_modules. Tutto ha funzionato quando non si usano gli hash.

La soluzione era di escludere il pacchetto nelle opzioni di uglificazione:

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

Ulteriori informazioni

Ho lo stesso problema, basta cambiare da Navigatora{Navigator}

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

Non corretto per questa risposta, ma per gli altri con lo stesso errore il mio errore ridicolmente sciocco potrebbe potenzialmente aiutare.

Stupidamente, il mio problema stava usando la notazione di funzione includendo () seguendo il nome della classe .

Assicurarsi che la sintassi sia corretta. E hai importato ed esportato tutti i componenti / moduli esterni con i nomi e i percorsi corretti.

Questo modello dovrebbe funzionare correttamente se è installata una nuova versione di reagire:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Le mie condizioni

• Crea-React-app
• React-scripts v3.2
• Froala rich text editor v3.1
• La modalità di sviluppo ha funzionato bene
• La build di produzione è stata interrotta con l'errore indicato nella domanda

Soluzione al mio problema

Esegui il downgrade di Froala alla v3.0.

Qualcosa nella v3.1 ha rotto il nostro processo di creazione di Crea React App.

Aggiornamento: utilizzare gli script di reazione v3.3

Abbiamo scoperto che c'era un problema tra React Scripts 3.2 e Froala 3.1.

L'aggiornamento a React Scripts v3.3 ci ha permesso di aggiornare a Froala 3.1.

Ho scritto

React.component

invece di React.Component Quello era il mio problema)) e lo cercavo da più di mezz'ora.

Nel mio caso stavo usando:

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

che era sbagliato ma corretto è:

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

assicurati anche che ci sia
√ React.Component
NOT
ˣ React.componentoReact.Components

Potrebbe esserci un pacchetto di terze parti che causa questo. Nel nostro caso è stato reattivo . Abbiamo impostazioni simili a quelle di @steine ​​( vedi questa risposta sopra ).

Per trovare il pacchetto problematico ho eseguito il webpack compilato localmente con la modalità di produzione e quindi sono stato in grado di trovare il pacchetto problematico nella traccia dello stack. Quindi per noi questo ha fornito la soluzione e sono stato in grado di mantenere l'ugurazione.

Usando Babel (5.8) ottengo lo stesso errore se provo ad usare l'espressione export defaultin combinazione con altri export:

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

Ecco una risposta:

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

Nel mio caso, ho corretto questo errore cambiando export default class yourComponent extends React.Component() {}in export default class yourComponent extends React.Component {}. Sì, eliminare la parentesi ha ()corretto l'errore.

Ho riscontrato questo errore durante l'importazione del componente come:

import React, { Components } from 'react';

invece di

import React, { Component } from 'react';

Se hai un errore di battitura nella tua importazione o nella generazione della tua classe, potrebbe essere semplicemente quello.

Cambia import React from 'react-domin import React, {Component} from 'react'
E cambia class Classname extends React.Componentin class Classname extends Component
Se stai usando l'ultima versione di React (16.8.6 a partire da ora) .

Se ricevi questo errore e stai utilizzando Browserify e browserify-shim (come in un'attività Grunt), potresti aver vissuto un momento stupido come quello in cui ho detto involontariamente browserify-shimdi trattare React come già parte dello spazio dei nomi globale (ad esempio, caricato da un CDN).

Se vuoi che Browserify includa React come parte della trasformazione e non un file separato, assicurati che la linea "react": "global:React"non appaia nella "browserify-shim"sezione del tuo packages.jsonfile.

Questo può accadere anche se lo avessi usato al requireposto del importtuo codice.

È successo anche a me quando l'ho usato:

class App extends React.Component(){

}

Invece di quello giusto:

class App extends React.Component{

}

Avviso: - () nel primo che è la causa principale di questo problema

Per coloro che utilizzano react-native:

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

potrebbe produrre questo errore.

Considerando che il riferimento reactdiretto è il modo più stabile per andare:

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

Nel mio caso è stata la modifica di React.Element a React.Component a correggere questo errore.