reaktjs dające błąd Nieprzechwycony typ błędu: Wyrażenie super musi mieć wartość null lub funkcję, nie może być niezdefiniowana

Korzystam z Reagjs.

Po uruchomieniu kodu poniżej przeglądarka mówi:

Uncaught TypeError: Super wyrażenie musi być null lub funkcja, nie może być niezdefiniowana

Wszelkie wskazówki dotyczące tego, co jest złe, będą mile widziane.

Najpierw wiersz użyty do skompilowania kodu:

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

I kod:

var React = require('react');

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

AKTUALIZACJA: Po spaleniu w piekle przez trzy dni tego problemu stwierdziłem, że nie korzystam z najnowszej wersji reagowania.

Zainstaluj globalnie:

sudo npm install -g react@0.13.2

zainstaluj lokalnie:

npm install react@0.13.2

upewnij się, że przeglądarka również używa właściwej wersji:

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

Mam nadzieję, że to ocali komuś trzy dni cennego życia.

Nazwy klas

Po pierwsze, jeśli masz pewność, że rozszerzasz klasę o poprawnej nazwie, np. React.Component , a nie React.component lub React.createComponent, może być konieczne uaktualnienie wersji React. Zobacz odpowiedzi poniżej, aby uzyskać więcej informacji na temat klas, z których można rozszerzyć.

Upgrade React

React obsługuje tylko klasy w stylu ES6 od wersji 0.13.0 (zobacz ich oficjalny post na blogu na wstępie wsparcia tutaj .

Wcześniej podczas korzystania z:

class HelloMessage extends React.Component

próbowałeś użyć słów kluczowych ES6 ( extends) do podklasy z klasy, która nie została zdefiniowana za pomocą ES6 class. Prawdopodobnie dlatego zachowywałeś się dziwnie z superdefinicjami itp.

Tak, TL; DR - aktualizacja do React v0.13.x.

Zależności kołowe

Może się to również zdarzyć, jeśli masz cykliczną strukturę importu. Jeden moduł importuje inny i na odwrót. W takim przypadku wystarczy zmodyfikować kod, aby go uniknąć. Więcej informacji

Oznacza to, że chcesz podklasy coś, co powinno być Class, ale jest undefined. Przyczyny mogą być następujące:

• literówka Class extends ..., więc rozszerzasz niezdefiniowaną zmienną
• literówka import ... from, więc importujesz undefinedz modułu
• moduł odniesienia nie zawiera wartości, którą chcesz zaimportować (np. przestarzały moduł - wielkość liter w React), więc importujesz nieistniejącą wartość ( undefined)
• literówka w przywołanej export ...instrukcji modułu , więc eksportuje niezdefiniowaną zmienną
• brak odnośnika do modułu exportw ogóle, więc eksportuje tylkoundefined

Może to być również spowodowane błędem w literówce, więc zamiast dużej litery ComponentC masz componentniższą wartość c, na przykład:

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

Uwaga: Przyczyną tego błędu może być to, że istnieje Reacti uważamy automatycznie, że następną powinna być metoda lub właściwość reagowania zaczynająca się od małej litery, ale w rzeczywistości jest to kolejna klasa ( Component), która powinna zaczynać się wielką literą .

W moim przypadku, w przypadku reakcji rodzimej, błąd polegał na tym, że miałem

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

zamiast

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

Doświadczyłem tego, gdy brakowało mi instrukcji eksportu dla klasy JSX.

Na przykład:

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

Możesz to również otrzymać, jeśli próbujesz wykonać React.Componentz błędną ()definicją klasy.

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

Co czasem udaje mi się zrobić, kiedy przechodzę z bezpaństwowego komponentu funkcjonalnego do klasy.

Widziałem ten błąd, gdy masz zależność cykliczną.

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

Dla innych osób, które mogą rozwinąć ten problem. Możesz również sprawdzić, czy componentmetoda w React.Componentjest wielka. Miałem ten sam problem i to, co spowodowało, że napisałem:

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

Zmieniłem to na

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

i wszystko działało dobrze

Dostałem to, gdy miałem literówkę przy moim imporcie:

import {Comonent} from 'react';

Sprawdź, czy klasy, które rozszerzasz, faktycznie istnieją, kilka metod React jest amortyzowanych, może to być także błąd literowy 'React.Components'zamiast'React.Component'

Powodzenia!!

Przedstawię inne możliwe rozwiązanie, które dla mnie zadziałało. Korzystałem z indeksu wygody, aby zebrać wszystkie komponenty w jeden plik.

Nie wierzę, że w chwili pisania tego jest oficjalnie wspierane przez Babel i rzuca maszynopis na spin - jednak widziałem, że jest używany w wielu projektach i jest zdecydowanie wygodny.

Jednak w połączeniu z dziedziczeniem wydaje się, że generuje błąd przedstawiony w powyższym pytaniu.

Prostym rozwiązaniem jest, aby moduły działające jak rodzice musiały zostać zaimportowane bezpośrednio zamiast przez plik indeksu wygody.

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

To działało dla mnie:

import React, {Component} from 'react';

Webpack 4 Chunks and Hashes with Uglification by TerserPlugin

Może się to zdarzyć, gdy Webpack używa fragmentów i skrótów z minimalizacją i nielifikacją za pośrednictwem TerserPlugin (obecnie w wersji 1.2.3). W moim przypadku błąd został zawężony do uglifikacji przez wtyczkę Terser mojego vendors.[contenthash].jspakietu, który ją przechowuje node_modules. Wszystko działało, gdy nie używasz skrótów.

Rozwiązaniem było wykluczenie pakietu w opcjach uglifikacji:

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

Więcej informacji

Mam ten sam problem, po prostu zmień z Navigatorna{Navigator}

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

Niepoprawna dla tej odpowiedzi, ale dla innych z tym samym błędem mój absurdalnie głupi błąd może potencjalnie pomóc.

Głupio, że mój problem polegał na użyciu notacji funkcji poprzez włączenie () po nazwie klasy .

Upewnij się, że Twoja składnia jest poprawna. Zaimportowałeś i wyeksportowałeś zewnętrzne komponenty / moduły z poprawnymi nazwami i ścieżkami.

Ten szablon powinien działać poprawnie, jeśli masz zainstalowaną nową wersję Reaguj:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Moje warunki

• Utwórz aplikację React
• React-scripts v3.2
• Bogaty edytor tekstu Froala v3.1
• Tryb programowania działał dobrze
• Kompilacja produkcyjna została zerwana z błędem wymienionym w pytaniu

Rozwiązanie mojego problemu

Zmień wersję Froala na v3.0.

Coś w wersji 3.1 złamało nasz proces tworzenia aplikacji Create React.

Aktualizacja: użyj skryptów reagujących w wersji 3.3

Odkryliśmy, że był problem między React Scripts 3.2 a Froala 3.1.

Aktualizacja do skryptów React v3.3 pozwoliła nam na aktualizację do Froala 3.1.

Napisałem

React.component

zamiast React.Component tego był mój problem)) i szukałem tego ponad pół godziny.

W moim przypadku korzystałem z:

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

co było złe, ale poprawne to:

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

upewnij się również, że nie ma
√ React.Component
NIE
ˣ React.componentlubReact.Components

Przyczyną tego może być pakiet innej firmy. W naszym przypadku było to olśniewające . Mamy podobne ustawienia jak w @steine ​​( patrz ta odpowiedź powyżej ).

Aby znaleźć problematyczny pakiet, uruchomiłem wersję webpack lokalnie w trybie produkcyjnym, dzięki czemu mogłem znaleźć problematyczny pakiet w śladzie stosu. Więc dla nas to pod warunkiem, że rozwiązanie i udało mi się utrzymać uglification.

Za pomocą Babel (5.8) pojawia się ten sam błąd, jeśli próbuję użyć wyrażenia export defaultw połączeniu z innymi export:

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

Oto jedna odpowiedź:

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

W moim przypadku naprawiłem ten błąd, zmieniając export default class yourComponent extends React.Component() {}na export default class yourComponent extends React.Component {}. Tak, usuń nawias ()naprawiono błąd.

Wystąpił ten błąd podczas importowania komponentu, takiego jak:

import React, { Components } from 'react';

zamiast

import React, { Component } from 'react';

Sprawdź, czy masz błąd w pisowni podczas importowania lub generowania klasy, może to być po prostu to.

Zmień import React from 'react-domna import React, {Component} from 'react'
I zmień class Classname extends React.Componentna class Classname extends Component
Jeśli używasz najnowszej wersji React (od teraz 16.8.6) .

Jeśli otrzymujesz ten błąd i używasz Browserify i Browserify-shim (jak w zadaniu Grunt), być może doświadczyłeś głupiego momentu, tak jak ja, w którym mimowolnie browserify-shimkazałeś traktować React jako już część globalnej przestrzeni nazw (na przykład załadowane z CDN).

Jeśli chcesz, aby Browserify uwzględnił React jako część transformacji, a nie osobny plik, upewnij się, że linia "react": "global:React"nie pojawia się w "browserify-shim"sekcji packages.jsonpliku.

Może się to również zdarzyć, jeśli użyłeś requirezamiast importw swoim kodzie.

Zdarzyło mi się również, gdy użyłem tego:

class App extends React.Component(){

}

Zamiast właściwego:

class App extends React.Component{

}

Uwaga: - () w pierwszym, który jest główną przyczyną tego problemu

Dla osób używających react-native:

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

może powodować ten błąd.

Podczas gdy reactbezpośrednie odwoływanie się jest bardziej stabilnym sposobem:

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

W moim przypadku zmiana React.Element na React.Component naprawia ten błąd.