reaktjs hatası veriyor Yakalanmadı TypeError: Süper ifade boş veya bir işlev olmalı, tanımsız değil

Tepki kullanıyorum.

Aşağıdaki kodu çalıştırdığınızda tarayıcı diyor ki:

Yakalanmayan TypeError: Süper ifade tanımsız değil null veya bir işlev olmalıdır

Neyin yanlış olduğuna dair herhangi bir ipucu takdir edilecektir.

İlk olarak kodu derlemek için kullanılan satır:

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

Ve kod:

var React = require('react');

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

GÜNCELLEME: Bu sorun üzerinde üç gün boyunca cehennem ateşinde yandıktan sonra en son tepki sürümünü kullanmadığımı fark ettim.

Global olarak yükleyin:

sudo npm install -g react@0.13.2

yerel olarak yükle:

npm install react@0.13.2

tarayıcının da doğru sürümü kullandığından emin olun:

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

Umarım bu üç gün değerli hayat kurtarır.

Sınıf İsimleri

İlk olarak, React.component veya React.createComponent gibi doğru adlandırılmış bir sınıftan (ör. React.Component) genişlettiğinizden eminseniz, React sürümünüzü yükseltmeniz gerekebilir. Genişletilecek sınıflar hakkında daha fazla bilgi için aşağıdaki yanıtlara bakın.

Yükseltme Reaksiyonu

Tepki yalnızca sürüm 0.13.0 beri (destek tanıtımı üzerindeki resmi blog yayınına ES6 tarzı sınıfları desteklemiştir burada .

Bundan önce, kullanırken:

class HelloMessage extends React.Component

ES6 extendskullanılarak tanımlanmayan bir sınıftan alt sınıfa geçmek için ES6 anahtar sözcüklerini ( ) kullanmaya çalışıyordunuz class. Muhtemelen supertanımlarla vb. Garip davranışlarla karşılaşıyorsunuzdur .

Evet, TL; DR - React v0.13.x sürümüne güncelleyin.

Dairesel Bağımlılıklar

Bu, dairesel içe aktarma yapınız varsa da oluşabilir. Bir modül diğerini ve diğer yolu içe aktarır. Bu durumda kodu önlemek için kodunuzu yeniden düzenlemeniz yeterlidir. Daha fazla bilgi

Bu, alt sınıfın olması gereken Class, ancak olması gereken bir şey olmasını istediğiniz anlamına gelir undefined. Sebepleri şunlar olabilir:

• yazım hatası Class extends ..., böylece tanımsız değişkeni genişletiyorsunuz
• yazarak import ... from, undefinedmodülden içe aktarırsınız
• başvurulan modül değeri içermiyor, içe aktarmak istiyorsunuz (örn. kullanılmayan modül - React ile durum), dolayısıyla mevcut olmayan değeri içe aktarıyorsunuz ( undefined)
• başvurulan modül export ...deyiminde yazım hatası , dolayısıyla tanımsız değişkeni dışa aktarır
• modül eksik exportifadeye başvurdu , bu yüzden sadece ihracatundefined

Ayrıca bir yazım hatası hatası da olabilir, bu nedenle Componentbüyük C harfi yerine componentdaha düşük c'ye sahip olursunuz , örneğin:

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

Not: Bu hatanın kaynağı, bir Reactsonraki adımın otomatik olarak küçük harfle başlayan bir tepki yöntemi veya özelliği olması gerektiğinden kaynaklanıyor olabilir, ancak aslında büyük harfle başlaması gereken başka bir Class ( Component) olmasıdır. .

Benim durumumda, tepki yerli ile, hata ben vardı

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

onun yerine

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

JSX sınıfı için bir ihracat bildirimi eksikken bunu yaşadım.

Örneğin:

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

Sınıf tanımınızda React.Componenthatalı bir şekilde yürütmeye çalışıyorsanız da bunu alabilirsiniz ().

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

Hangi zaman vatansız bir fonksiyonel bileşen bir sınıfa dönüştürürken yapmak başardı.

Dairesel bir bağımlılığınız olduğunda bu hatayı gördüm.

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

Diğer kişiler için bu durum gelişebilir. Ayrıca, componentyöntemin React.Componentbüyük harfle yazıldığını da kontrol edebilirsiniz . Aynı sorunu yaşadım ve buna neden olan şey yazdım:

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

Olarak değiştirdim

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

ve her şey iyi çalıştı

İthalatımda bir yazım hatası olduğunda bunu aldım:

import {Comonent} from 'react';

Gerçekte genişlettiğiniz Sınıfları kontrol edin, birkaç Tepkime yöntemi amortismana tabi tutulur, 'React.Components'bunun yerine Yazım hatası da olabilir'React.Component'

İyi şanslar!!

Benim için işe yarayan başka bir olası çözüme katkıda bulunacağım. Tüm bileşenleri tek bir dosyada toplamak için kolaylık dizinini kullanıyordum.

Yazarken bunun resmi olarak babil tarafından desteklendiğine inanmıyorum ve daktiloyu bir dönüşe atıyor - ancak birçok projede kullanıldığını gördüm ve kesinlikle uygun.

Bununla birlikte, kalıtımla birlikte kullanıldığında yukarıdaki soruda sunulan hatayı atmaktadır.

Basit bir çözüm, ebeveyn gibi davranan modüllerin bir kolaylık endeksi dosyası yerine doğrudan içe aktarılması gerektiğidir.

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

Bu benim için çalıştı:

import React, {Component} from 'react';

Webpack 4 Topaklanma ile Topak ve Karmalar TerserPlugin

Bu durum, Webpack, TerserPlugin (şu anda sürüm 1.2.3'te) aracılığıyla küçültme ve çözme işlemine sahip parçalar ve karmalar kullandığında oluşabilir. Benim durumumda hata benim vendors.[contenthash].jspaket tutan Terser Eklentisi tarafından çirkinleştirme daraltıldı node_modules. Karma kullanmadığında her şey işe yaradı.

Çözüm, paketi uglification seçeneklerinde hariç tutmaktı:

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

Daha fazla bilgi

Sadece değiştirmek, aynı sorun var Navigatoriçin{Navigator}

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

Bu cevap için doğru değil ama aynı hataya sahip olanlar için gülünç saçma hatam potansiyel olarak yardımcı olabilir.

Aptalca, benim sorunum sınıf ismini takip ederek () fonksiyon gösterimini kullanmaktı .

Sözdiziminizin doğru olduğundan emin olun. Ayrıca, doğru adlara ve yollara sahip tüm harici bileşenleri / modülleri içe ve dışa aktardınız.

Yüklü yeni bir reaksiyon sürümünüz varsa bu şablon düzgün çalışmalıdır:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Koşullarım

• Create-Tepki-App
• Reaksiyon komut dosyaları v3.2
• Froala zengin metin editörü v3.1
• Geliştirme modu iyi çalıştı
• Soruda belirtilen hatayla üretim yapısı kırıldı

Sorunuma çözüm

Froala'yı v3.0 sürümüne düşürün.

V3.1 sürümünde bir şey, React App Oluşturma sürecimizi bozdu.

Güncelleme: Reaksiyon komut dosyalarını kullanma v3.3

React Scripts 3.2 ve Froala 3.1 arasında bir sorun olduğunu keşfettik.

React Scripts v3.3 sürümüne güncelleme yapmak, Froala 3.1 sürümüne geçmemizi sağladı.

Yazdım

React.component

bunun yerine React.Component benim sorunumdu)) ve bunu yarım saatten fazla arıyordu.

Benim durumumda kullanıyordum:

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

yanlış olan ancak doğru olan:

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

ayrıca
√ React.Component
NOT
ˣ olduğundan emin olun React.componentveyaReact.Components

Buna neden olan bir üçüncü taraf paketi olabilir. Bizim durumumuzda bu reaksiyon göz kamaştırıyordu . @Steine ​​ile benzer ayarlarımız var ( yukarıdaki bu cevaba bakınız ).

Sorunlu paketi bulmak için üretim moduyla yerel olarak webpack yapısını çalıştırdım ve böylece yığın izinde sorunlu paketi bulabildim. Bizim için bu çözüm sağladı ve ben çirkinliği devam ettirebildim.

Babel'i (5.8) kullanma İfadeyi export defaultbaşkalarıyla birlikte kullanmaya çalışırsam aynı hatayı alıyorum export:

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

İşte bir cevap:

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

Benim durumumda, ben değişiklikten bu hatayı tespit export default class yourComponent extends React.Component() {}etmek export default class yourComponent extends React.Component {}. Evet parantez silmek ()hatayı düzeltti.

Bu hatayı aşağıdaki gibi içe aktarırken yaşadım:

import React, { Components } from 'react';

onun yerine

import React, { Component } from 'react';

Eğer ithalat veya sınıf nesil bir yazım hatası varsa Bak, bu sadece olabilir.

Değişim import React from 'react-domiçin import React, {Component} from 'react'
Ve değişim class Classname extends React.Componentiçin class Classname extends Component
size en son sürümünü kullanıyorsanız Tepki (bugün itibariyle 16.8.6) .

Bu hatayı alıyorsanız ve Browserify ve browserify-shim kullanıyorsanız (Grunt görevinde olduğu gibi), istemeden browserify-shimReact'a zaten global ad alanının bir parçası olarak davranmasını söylediğiniz yerde yaptığım gibi aptal bir an yaşayabilirsiniz (örneğin, CDN'den yüklenmiştir).

Browserify'ın React'ı dönüşümün bir parçası olarak eklemesini istiyorsanız, ayrı bir dosya olarak eklemiyorsanız, satırın dosyanızdaki bölümde "react": "global:React"görünmediğinden emin olun ."browserify-shim"packages.json

Bu, kodunuz requireyerine kullanmak yerine de olabilir import.

Bunu kullandığımda da oldu:

class App extends React.Component(){

}

Doğru olanın yerine:

class App extends React.Component{

}

Uyarı: - () Bu sorunun ana nedeni olan ilkinde

Kullananlar için react-native:

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

bu hataya neden olabilir.

Oysa reactdoğrudan referans vermek daha istikrarlı bir yol:

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

Benim durumumda, bu hata için düzeltme yapan React.Component için React.Element değişikliği oldu.