reactjs memberikan kesalahan Uncaught TypeError: Ekspresi super harus berupa null atau fungsi, tidak terdefinisi


256

Saya menggunakan reactjs.

Ketika saya menjalankan kode di bawah ini browser mengatakan:

UnEught TypeError: Ekspresi super harus berupa null atau fungsi, tidak terdefinisi

Setiap petunjuk sama sekali tentang apa yang salah akan dihargai.

Pertama, baris yang digunakan untuk mengkompilasi kode:

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

Dan kodenya:

var React = require('react');

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

UPDATE: Setelah terbakar dalam api neraka selama tiga hari pada masalah ini saya menemukan bahwa saya tidak menggunakan versi terbaru dari reaksi.

Instal secara global:

sudo npm install -g react@0.13.2

instal secara lokal:

npm install react@0.13.2

pastikan browser juga menggunakan versi yang tepat:

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

Semoga ini bisa menyelamatkan orang lain selama tiga hari dari kehidupan yang berharga.


111
Pada 0.14.8, Anda masih bisa mendapatkan ini jika Anda melakukan sesuatu seperti extends React.component(huruf kecil c).
Kevin Suttle

12
@ Kevin hanya ingin mengulangi, pada dasarnya Jika Anda memiliki kesalahan ketik di suatu tempat, dalam kasus saya itu Componentsbukan Component :). Komentar Anda membantu BTW
P-RAD

Masalah saya adalah saya tidak mengekspor kelas pada akhir file ...
R01010010

2
Saya melakukan React.Components (jamak), yang kanan adalah React.Component (singular) Ow baik ... bagaimana saya merindukan itu ...
Ismael

5
@Kevin Suttle Komentar Anda sebenarnya lebih berguna daripada jawabannya
Mick Jones

Jawaban:


325

Nama Kelas

Pertama, jika Anda yakin bahwa Anda memperluas dari kelas yang dinamai dengan benar, mis. React.Component , bukan React.component atau React.createComponent, Anda mungkin perlu meningkatkan versi React Anda. Lihat jawaban di bawah untuk informasi lebih lanjut tentang kelas yang akan diperluas.

Perbarui React

React hanya mendukung kelas gaya ES6 sejak versi 0.13.0 (lihat posting blog resmi mereka di bagian pengenalan dukungan di sini .

Sebelum itu, ketika menggunakan:

class HelloMessage extends React.Component

Anda mencoba menggunakan kata kunci ES6 ( extends) untuk subkelas dari kelas yang tidak didefinisikan menggunakan ES6 class. Ini kemungkinan mengapa Anda mengalami perilaku aneh dengan superdefinisi dll.

Jadi, ya, TL; DR - perbarui untuk Bereaksi v0.13.x.

Ketergantungan Melingkar

Ini juga dapat terjadi jika Anda memiliki struktur impor melingkar. Satu modul mengimpor modul lainnya dan sebaliknya. Dalam hal ini Anda hanya perlu memperbaiki kode Anda untuk menghindarinya. Info lebih lanjut


202
Untuk semua orang yang memiliki masalah ini tetapi memperbarui Bereaksi bukanlah perbaikan - gulir lebih jauh ke bawah ke jawaban lain, itu mungkin salah ketik sederhana. Dalam kasus saya itu adalah definisi kelas menggunakan React.componentbukanReact.Component
Christian Benke

1
FYI, kelas cara lama dapat diperpanjang juga dengan extends. Coba ini var x = function(){}; class y extends x {}
Mouneer

2
Itu adalah struktur impor melingkar untuk saya. Terima kasih telah menyelamatkan saya banyak jam untuk debugging!
DrunkDevKek

4
Hanya FYI. Saya baru-baru ini mendapatkan kesalahan yang sama meskipun berada di ReactJS 16.x. Ternyata saya salah ketik di baris ini: class App extends React.Component () {...}- yang harus dikoreksi ke class App extends React.Component {...} (tanpa ()di akhir)
Atlas7

1
Komponen Modal 'C'! #facepalm
David

127

Ini berarti bahwa Anda ingin subkelas sesuatu, yang seharusnya Class, tetapi memang demikian undefined. Alasannya mungkin:

  • salah ketik Class extends ..., jadi Anda perluas variabel yang tidak ditentukan
  • salah ketik import ... from, jadi Anda mengimpor undefineddari modul
  • modul referensi tidak mengandung nilai, Anda ingin mengimpor (mis. modul usang - huruf dengan React), sehingga Anda mengimpor nilai yang tidak ada ( undefined)
  • kesalahan ketik dalam export ...pernyataan modul referensi , sehingga mengekspor variabel yang tidak terdefinisi
  • direferensikan exportpernyataan pernyataan hilang sama sekali, sehingga hanya mengeksporundefined

23
Dalam kasus saya itu adalah huruf kecil dari Komponen di React.Component.
Belajar statistik dengan contoh

3
Dalam kasus saya itu adalah kelas yang ditulis sendiri tidak diimpor dengan benar. Saya mengimpor kelas yang diekspor standar melalui import {Foo} from 'bar'alih-alih import Foo from 'bar'. Karena itu dipilih.
xtra

4
Jangan lakukan ini juga: class Thing extends React.Component() {- Saya harus menghapus()
activedecay

Dalam kasus saya kesalahan ini disebabkan oleh secara tidak sengaja membuat referensi melingkar oleh apa yang saya impor (kelas yang ingin saya sampaikan ke subkelas) di komponen saya membuat fungsi. Ketika saya mencoba menjalankan / me-render subclass karena superClass tidak dibuat namun tidak terdefinisi.
Leon

^ Disebabkan oleh referensi melingkar untuk saya juga.
Cailen

90

Ini juga dapat disebabkan oleh kesalahan ketik, jadi alih-alih dengan huruf Componentkapital C, Anda componentmenggunakan huruf c yang lebih rendah, misalnya:

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

Catatan: Sumber kesalahan ini mungkin karena ada Reactdan kami pikir secara otomatis apa yang akan terjadi selanjutnya harus berupa metode reaksi atau properti yang dimulai dengan huruf kecil, tetapi sebenarnya itu adalah Kelas lain ( Component) yang harus dimulai dengan huruf kapital .


2
ya, anehnya kesalahan ini tidak tertangkap saat langkah pembuatan webpack, tetapi akan muncul pada saat dijalankan.
worc

31

Dalam kasus saya, dengan reaksi asli, kesalahannya adalah yang saya miliki

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

dari pada

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

2
Ini berhasil dalam kasus saya! Dokumentasi yang disediakan di situs reaksi-asli memiliki contoh buggy ini :)
theusual

Terima kasih, Komponen harus mengimpor dari 'react'
xyz

15

Saya mengalami ini ketika kehilangan pernyataan ekspor untuk kelas JSX.

Sebagai contoh:

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

15

Anda juga dapat menerima ini jika Anda mencoba untuk mengeksekusi React.Componentdengan kesalahan ()dalam definisi kelas Anda.

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

Yang kadang-kadang saya berhasil lakukan ketika saya mengkonversi dari komponen fungsional stateless ke kelas.


INI masalah bagi saya. sangat konyol. Terima kasih banyak!
pertama

14

Saya telah melihat kesalahan ini ketika Anda memiliki ketergantungan melingkar.

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

10

Untuk orang lain, yang mungkin mengembangkan masalah ini. Anda juga dapat memeriksa bahwa componentmetode dalam React.Componenthuruf kapital. Saya memiliki masalah yang sama dan apa yang menyebabkannya saya menulis:

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

Saya mengubahnya menjadi

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

dan semuanya bekerja dengan baik


6

Saya mendapatkan ini ketika saya salah ketik pada impor saya:

import {Comonent} from 'react';

Saya juga mendapatkan ini dengan memperluas React.Components, bukan React.Component (no s).
Pierre Maoui

1
Saya juga mendapatkan ini tetapi untuk mengetik huruf kecil pertama dari sebuah komponen - ... extend React.component {}
Ivan Topić

5

Periksa Kelas yang Anda perluas benar-benar ada, beberapa metode Bereaksi didepresiasi, Mungkin juga ada kesalahan ketik 'React.Components' alih-alih'React.Component'

Semoga berhasil!!


Dalam kasus saya, saya menggunakan React.componentalih-alih React.Component(perhatikan ibukota "C" saya tidak ada)
Javis Perez

4

Saya akan berkontribusi solusi lain yang mungkin, yang bekerja untuk saya. Saya menggunakan indeks kenyamanan untuk mengumpulkan semua komponen menjadi satu file.

Saya tidak percaya pada saat penulisan ini secara resmi didukung oleh babel, dan melempar naskah ke dalam putaran - namun saya telah melihatnya digunakan dalam banyak proyek dan pasti nyaman.

Namun, ketika digunakan dalam kombinasi dengan pewarisan tampaknya melemparkan kesalahan yang disajikan dalam pertanyaan di atas.

Solusi sederhana adalah, untuk modul yang bertindak sebagai orang tua perlu diimpor langsung, bukan melalui file indeks kenyamanan.

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

Ini membantu saya menemukan kesalahan saya. Tanpa sengaja membungkus nama komponen dalam {} dalam pernyataan impor saya. Perbedaan yang halus. Sulit untuk menemukan kesalahan itu.
Dennis W

4

Ini bekerja untuk saya:

import React, {Component} from 'react';

4

Webpack 4 Bongkahan dan Hash dengan Uglification oleh TerserPlugin

Ini dapat terjadi ketika Webpack menggunakan potongan dan hash dengan minifikasi dan unglifikasi melalui TerserPlugin (saat ini pada versi 1.2.3). Dalam kasus saya kesalahan dipersempit ke uglifikasi oleh Plugin Terser dari vendors.[contenthash].jsbundel saya yang memegangnode_modules . Semuanya berfungsi saat tidak menggunakan hash.

Solusi adalah dengan mengecualikan bundel dalam opsi uglification:

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

Info lebih lanjut


Ini memang memecahkan masalah bagi saya, namun saya bisa menunjukkan penyebabnya dan akhirnya saya bisa menerapkan uglifikasi. Lihat jawaban saya - bereaksi-menyilaukan.
Erez Cohen

Saya mempersempit ke plugin terser, akhirnya mengubah script reaksi ke versi 3.2.0 memperbaiki masalah bagi saya.
avck

3

Saya memiliki masalah yang sama, hanya berubah dari Navigatormenjadi{Navigator}

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

1
pada dasarnya itu harus cocok seperti ini: export Foo ... import { Foo } - atau - export default Foo ... import Foo
dpren

3

Tidak benar untuk jawaban ini tetapi untuk orang lain dengan kesalahan yang sama kesalahan saya yang konyol bisa berpotensi membantu.

Bodoh, masalah saya menggunakan notasi fungsi dengan memasukkan () mengikuti nama kelas .

Pastikan sintaks Anda benar. Dan Anda telah mengimpor & mengekspor komponen / modul eksternal dengan nama dan jalur yang benar.

Template ini akan berfungsi dengan baik jika Anda memiliki versi reaksi yang agak baru diinstal:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

3

Kondisi saya

  • Buat-Bereaksi-Aplikasi
  • Bereaksi-skrip v3.2
  • Editor teks kaya froala v3.1
  • Mode pengembangan bekerja dengan baik
  • Membangun produksi rusak dengan kesalahan yang disebutkan dalam pertanyaan

Solusi untuk masalah saya

Turunkan Froala ke v3.0.

Sesuatu di v3.1 merusak proses pembuatan Buat Aplikasi Bereaksi kami.

Pembaruan: Gunakan skrip reaksi v3.3

Kami menemukan bahwa ada masalah antara Bereaksi Naskah 3.2 dan Froala 3.1.

Memperbarui ke React Scripts v3.3 memungkinkan kami untuk meningkatkan ke Froala 3.1.


1
Aku cinta kamu. Saya ingin datang untuk menemukan Anda dan mencium kaki Anda !!!!!!!!!!!!!!!!!!!!!!!!! (Nightmare all-nighter over)
GaddMaster

Saya tidak menggunakan aplikasi create react, tetapi menghadapi masalah yang sama pada prod dengan froala 3.1. Bisakah Anda menjelaskan apa masalahnya di sini?
Karan Jariwala

2

Saya sudah menulis

React.component

bukannya React.Component Itu masalah saya)) dan sedang mencari ini lebih dari setengah jam.


2

Dalam kasus saya, saya menggunakan:

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

yang salah tetapi yang benar adalah:

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

juga pastikan ada
React.Component
TIDAK
ˣ React.componentatauReact.Components


Selamat datang di SO. Tampaknya jelas OP tidak melakukan kesalahan ini karena mereka sudah memasukkan formulir yang benar dalam pertanyaan. Apakah Anda mendapatkan kesalahan yang sama dengan OP tetapi dengan penyebab berbeda?
Eduardo

Ya saya mendapatkan kesalahan yang sama dengan OP tetapi saya menemukan bahwa penyebabnya berbeda dan berharap ini akan membantu orang lain.
Kush Gautam

2

Mungkin ada paket pihak ketiga yang menyebabkan ini. Dalam kasus kami itu menyilaukan bereaksi . Kami memiliki pengaturan yang mirip dengan @steine ​​( lihat jawaban ini di atas ).

Untuk menemukan paket yang bermasalah saya menjalankan webpack build secara lokal dengan mode produksi dan dengan demikian dapat menemukan paket yang bermasalah dalam jejak tumpukan. Jadi bagi kami ini memberikan solusinya dan saya dapat menjaga uglifikasi.


1

Menggunakan Babel (5.8) Saya mendapatkan kesalahan yang sama jika saya mencoba menggunakan ekspresi export defaultdalam kombinasi dengan yang lain export:

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


1

Dalam kasus saya, saya memperbaiki kesalahan ini dengan mengubah export default class yourComponent extends React.Component() {}ke export default class yourComponent extends React.Component {}. Ya, menghapus tanda kurung ()memperbaiki kesalahan.


1

Saya mengalami kesalahan ini ketika mengimpor komponen seperti:

import React, { Components } from 'react';

dari pada

import React, { Component } from 'react';

1

Lihat apakah Anda memiliki kesalahan ketik dalam impor atau pembuatan kelas Anda, bisa jadi itu saja.


1

Ubah import React from 'react-domke import React, {Component} from 'react'
Dan ubah class Classname extends React.Componentke class Classname extends Component
Jika Anda menggunakan React versi terbaru (16.8.6 seperti yang sekarang) .


0

Jika Anda menerima kesalahan ini dan menggunakan Browserify dan browserify-shim (seperti dalam tugas Grunt), Anda mungkin mengalami momen bodoh seperti yang saya lakukan di mana Anda tidak sengaja memberi tahubrowserify-shim untuk memperlakukan Bereaksi sebagai sudah menjadi bagian dari namespace global (misalnya, diambil dari CDN).

Jika Anda ingin Browserify menyertakan Bereaksi sebagai bagian dari transformasi, dan bukan file terpisah, pastikan baris "react": "global:React"tersebut tidak muncul di "browserify-shim"bagian dalam packages.jsonfile Anda .


Bagaimana Anda menghindari Uncaught Error: Cannot find module 'react'setelah menghapus konfigurasi browserify-shim? Pada dasarnya saya ingin tetap bereaksi sebagai ketergantungan eksternal tetapi browserify tampaknya tidak mengerti bagaimana membangun bundel dan tetap Bereaksi eksternal. Ini mungkin atau mungkin bukan karena modul yang saya sertakan di titik masuk browserify saya telah bereaksi sebagai ketergantungan.
dmarr

FWIW, menghapus reaksi dari konfigurasi browserify-shim dan membiarkan browserify merekonsiliasi ketergantungan yang biasanya masih menghasilkan masalah OP.
dmarr

0

Ini juga dapat terjadi jika Anda telah menggunakan requirealih-alih importdalam kode Anda.


0

Terjadi pada saya juga ketika saya menggunakan ini:

class App extends React.Component(){

}

Alih-alih yang benar:

class App extends React.Component{

}

Perhatikan: - () pada yang pertama yang merupakan penyebab utama masalah ini


0

Bagi yang menggunakan react-native:

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

dapat menghasilkan kesalahan ini.

Sedangkan merujuk reactlangsung adalah cara yang lebih stabil:

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

0

Dalam kasus saya itu adalah React.Element berubah menjadi React.Component yang membuat perbaikan untuk kesalahan ini.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.