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

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.

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

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

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 .

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

Saya mengalami ini ketika kehilangan pernyataan ekspor untuk kelas JSX.

Sebagai contoh:

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

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.

Saya telah melihat kesalahan ini ketika Anda memiliki ketergantungan melingkar.

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

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

Saya mendapatkan ini ketika saya salah ketik pada impor saya:

import {Comonent} from 'react';

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

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 bekerja untuk saya:

import React, {Component} from 'react';

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

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'

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 

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.

Saya sudah menulis

React.component

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

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

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.

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

Inilah satu jawaban:

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

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.

Saya mengalami kesalahan ini ketika mengimpor komponen seperti:

import React, { Components } from 'react';

dari pada

import React, { Component } from 'react';

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

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

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 .

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

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

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

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