Reajs त्रुटि दे रहा है बिना पढ़ा हुआ टाइपरर: सुपर अभिव्यक्ति या तो अशक्त या एक फ़ंक्शन होनी चाहिए, अपरिभाषित नहीं

Question

मैं reactjs का उपयोग कर रहा हूँ।

जब मैं ब्राउज़र के नीचे दिए गए कोड को चलाता हूं:

अनक्रेन्ड टाइपर: सुपर अभिव्यक्ति या तो अशक्त या एक फ़ंक्शन होनी चाहिए, अपरिभाषित नहीं

कोई भी संकेत जो गलत है, उसकी सराहना की जाएगी।

पहले कोड को संकलित करने के लिए प्रयुक्त लाइन:

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

और कोड:

var React = require('react');

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

अद्यतन: इस समस्या पर तीन दिनों तक नरकंकाल में जलने के बाद मैंने पाया कि मैं प्रतिक्रिया के नवीनतम संस्करण का उपयोग नहीं कर रहा था।

विश्व स्तर पर स्थापित करें:

sudo npm install -g react@0.13.2

स्थानीय रूप से स्थापित करें:

npm install react@0.13.2

सुनिश्चित करें कि ब्राउज़र सही संस्करण का भी उपयोग कर रहा है:

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

आशा है कि यह किसी और को तीन दिन की कीमती जिंदगी बचाता है।

Comments

0.14.8 के अनुसार, आप इसे तब भी प्राप्त कर सकते हैं यदि आप ऐसा कुछ extends React.component(लोअरकेस c) करते हैं।

— केविन सुतल

@ केविन बस फिर से लिखना चाहते हैं, मूल रूप से यदि आपके पास कहीं एक टाइपो है, तो मेरे मामले में यह :) के Componentsबजाय था Component। आपकी टिप्पणी ने BTW

— P-RAD

मेरा मुद्दा मैं फ़ाइल के अंत में कक्षा का निर्यात नहीं कर रहा था ...

— R01010010

मैंने React.Compenders (बहुवचन) किया, राइट है React.Component (एकवचन) Ow अच्छा ... मुझे कैसे याद किया कि ...

— Ismael

@ केविन सुटल आप टिप्पणी वास्तव में उत्तर की तुलना में अधिक उपयोगी है

— मिक जोन्स

Answer 1

कक्षा के नाम

सबसे पहले, यदि आप निश्चित हैं कि आप सही ढंग से नामित वर्ग, जैसे React.Component , नहीं React.component या React.createComponent से विस्तार कर रहे हैं, तो आपको अपना प्रतिक्रिया संस्करण अपग्रेड करने की आवश्यकता हो सकती है। विस्तार करने के लिए कक्षाओं के बारे में अधिक जानकारी के लिए नीचे दिए गए उत्तर देखें।

रिएक्ट अपग्रेड करें

रिएक्ट ने केवल 0.13.0 संस्करण के बाद से ईएस 6-शैली वर्गों का समर्थन किया है ( समर्थन परिचय पर उनके आधिकारिक ब्लॉग पोस्ट देखें) ।

इससे पहले, का उपयोग करते समय:

class HelloMessage extends React.Component

आप ES6 कीवर्ड का उपयोग करने का प्रयास कर रहे थे ( extends) एक वर्ग से उपवर्ग का उपयोग करें जिसे ES6 का उपयोग करके परिभाषित नहीं किया गया था class। यह संभावना थी कि आप superपरिभाषाओं आदि के साथ अजीब व्यवहार में भाग रहे थे ।

तो, हाँ, टीएल? डीआर - रिएक्ट v0.13.x पर अपडेट करें।

वृत्ताकार निर्भरता

यह तब भी हो सकता है जब आपके पास परिपत्र आयात संरचना हो। एक मॉड्यूल दूसरे और दूसरे तरीके से आयात करता है। इस मामले में आपको इससे बचने के लिए बस अपने कोड को रिफलेक्टर करना होगा। और जानकारी

Comments

बाकी सभी के लिए यह समस्या है, लेकिन प्रतिक्रिया को अद्यतन करना ठीक नहीं है - अन्य उत्तरों को और नीचे स्क्रॉल करें, यह एक सरल टाइपो हो सकता है। मेरे मामले में यह एक वर्ग परिभाषा का उपयोग कर रहा था React.componentके बजायReact.Component

— ईसाई Benke

FYI करें, पुराने तरीके की क्लास को भी बढ़ाया जा सकता है extends। इसे आजमाएं var x = function(){}; class y extends x {}

— Mouneer

यह मेरे लिए एक परिपत्र आयात संरचना थी। मुझे डिबगिंग के कई घंटे बचाने के लिए धन्यवाद!

— DrunkDevKek

सिर्फ आपकी जानकारी के लिए। मुझे हाल ही में ReactJS 16.x पर होने के बावजूद एक ही त्रुटि मिली। : बाहर मैं बदल जाता है इस लाइन में कोई गलती की थी class App extends React.Component () {...}जो करने के लिए सही किया जाना चाहिए - class App extends React.Component {...} (बिना ()अंत में)

— Atlas7

राजधानी 'सी' घटक! #facepalm

— डेविड

Answer 2

इसका मतलब है कि आप कुछ उप-वर्ग चाहते हैं, जो होना चाहिए Class, लेकिन है undefined। कारण हो सकते हैं:

• टाइपो इन Class extends ..., इसलिए आप अपरिभाषित चर का विस्तार कर रहे हैं
• टाइपो इन import ... from, इसलिए आप undefinedमॉड्यूल से आयात करते हैं
• संदर्भित मॉड्यूल में मान शामिल नहीं है, आप आयात करना चाहते हैं (उदाहरण के लिए अप्रचलित मॉड्यूल - प्रतिक्रिया के साथ मामला), इसलिए आप गैर मौजूदा मूल्य आयात कर रहे हैं undefined)
• संदर्भित मॉड्यूल export ...स्टेटमेंट में टाइपो , इसलिए यह अपरिभाषित चर निर्यात करता है
• संदर्भित मॉड्यूल exportबिल्कुल भी गायब नहीं है , इसलिए यह सिर्फ निर्यात करता हैundefined

Comments

मेरे मामले में यह React.Component में घटक का निचला हिस्सा था।

— को उदाहरण के लिए सीखना आँकड़े

मेरे मामले में यह एक स्व-लिखित वर्ग था जिसे सही ढंग से आयात नहीं किया गया था। मैं के import {Foo} from 'bar'बजाय के माध्यम से डिफ़ॉल्ट निर्यात वर्ग आयात कर रहा था import Foo from 'bar'। अपवित्र इसलिए।

— एक्ट्रा

यह या तो मत करो: class Thing extends React.Component() {- मैं दूर करने के लिए किया था()

— activedecay

मेरे मामले में यह त्रुटि दुर्घटनावश मेरे घटकों द्वारा रेंडर फ़ंक्शन में जो मैं आयात कर रहा था (वर्ग मैं उपवर्ग का विस्तार करना चाहता था) द्वारा एक परिपत्र संदर्भ बनाने के कारण हुई थी। जब मैंने सुपरक्लास को बनाया नहीं था तब से उपवर्ग को निष्पादित / प्रस्तुत करने की कोशिश की गई थी लेकिन यह अभी तक अपरिभाषित नहीं था।

— लियोन

^ मेरे लिए एक परिपत्र संदर्भ के कारण भी।

— केलेन

Answer 3

यह टाइपो त्रुटि के कारण भी हो सकता है, इसलिए Componentकैपिटल सी के बजाय , आपके पास componentनिम्न सी के साथ है, उदाहरण के लिए:

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

नोट: इस त्रुटि का स्रोत हो सकता है क्योंकि Reactहम हैं और हमें लगता है कि स्वचालित रूप से आगे क्या आता है एक प्रतिक्रिया विधि या संपत्ति एक लोअरकेस पत्र के साथ शुरू होनी चाहिए, लेकिन वास्तव में यह एक और वर्ग ( Component) है जो एक पूंजी मामले पत्र के साथ शुरू होना चाहिए ।

Comments

हुह, अजीब तरह से यह त्रुटि वेबपैक बिल्ड चरण के दौरान पकड़ा नहीं गया है, लेकिन यह रन टाइम पर दिखाई देगा।

— 23

Answer 4

मेरे मामले में, प्रतिक्रिया-मूल के साथ, त्रुटि यह थी कि मेरे पास था

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

के बजाय

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

Comments

यह मेरे मामले में काम किया! प्रतिक्रिया-मूल साइट में उपलब्ध कराए गए दस्तावेज़ में इस छोटी सी मिसाल है :)

— सामान्य

धन्यवाद, घटक को 'रिएक्ट' से आयात करना चाहिए

— xyz

Answer 5

मुझे यह अनुभव हुआ जब JSX वर्ग के लिए एक निर्यात विवरण याद आ रहा है।

उदाहरण के लिए:

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

Answer 6

आप इसे प्राप्त भी कर सकते हैं यदि आप अपनी कक्षा की परिभाषा में React.Componentकिसी गलत के साथ निष्पादित करने का प्रयास कर रहे हैं ()।

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

जिसे मैं कभी-कभी ऐसा करने का प्रबंधन करता हूं जब मैं एक स्टेटलेस फंक्शनल कंपोनेंट से एक क्लास में परिवर्तित कर रहा होता हूं।

Comments

यह मेरे लिए मुद्दा था। बहुत मूर्खतापूर्ण। आपका बहुत बहुत धन्यवाद!

— 15:18 बजे bstst

Answer 7

जब आपकी परिपत्र निर्भरता हो, तो मैंने यह त्रुटि देखी है।

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

Answer 8

किसी अन्य व्यक्ति के लिए, जो इस समस्या को विकसित कर सकता है। आप यह भी देख सकते हैं कि जिस componentविधि में React.Componentपूंजी लगाई गई है। मेरे पास यही मुद्दा था और इसका कारण यह था कि मैंने लिखा था:

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

मैंने इसे बदल दिया

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

और सब कुछ अच्छा काम किया

Answer 9

मुझे यह तब मिला जब मेरे पास अपने आयात पर एक टाइपो था:

import {Comonent} from 'react';

Comments

मुझे यह भी React.Component (कोई एस) के बजाय React.Compenders के साथ मिला है।

— पियरे मौई

मुझे यह भी मिला, लेकिन एक घटक के छोटे से पहले अक्षर को टाइप करने के लिए - ... React.component {}

— इवान

Answer 10

आपके द्वारा वास्तव में विस्तारित की जाने वाली कक्षाओं के लिए जाँच करें, कुछ रिएक्ट विधियां ह्रासमान हैं, यह 'React.Components'इसके बजाय टाइपो त्रुटि भी हो सकती है'React.Component'

शुभ लाभ!!

Comments

मेरे मामले में मैं React.componentइसके बजाय प्रयोग कर रहा था React.Component(राजधानी "सी" मुझे याद आ रही थी)

— जेविस पेरेज

Answer 11

मैं एक और संभावित समाधान में योगदान करने जा रहा हूं, जो मेरे लिए काम करता है। मैं सभी घटकों को एक फ़ाइल में एकत्र करने के लिए सुविधा सूचकांक का उपयोग कर रहा था।

मुझे विश्वास नहीं है कि लेखन के समय यह आधिकारिक तौर पर बेबल द्वारा समर्थित है, और एक स्पिन में टाइपस्क्रिप्ट फेंकता है - हालांकि मैंने इसे कई परियोजनाओं में उपयोग किया है और निश्चित रूप से सुविधाजनक है।

हालाँकि, जब इनहेरिटेंस के साथ संयोजन में उपयोग किया जाता है, तो यह ऊपर दिए गए प्रश्न में प्रस्तुत त्रुटि को फेंक देता है।

एक सरल समाधान है, ऐसे मॉड्यूल के लिए जो माता-पिता के रूप में कार्य करते हैं उन्हें एक सुविधा सूचकांक फ़ाइल के माध्यम से सीधे आयात करने की आवश्यकता होती है।

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

Comments

इससे मुझे यह पता लगाने में मदद मिली कि मैंने क्या गलत किया। संयोग से मेरे आयात विवरण में {} में घटक नाम लपेटा गया है। सूक्ष्म अंतर। उस गलती को हाजिर करना मुश्किल हो सकता है।

— डेनिस डब्ल्यू

Answer 12

यह मेरे लिए काम किया:

import React, {Component} from 'react';

Answer 13

TerserPlugin द्वारा Uglification के साथ वेबपैक 4 चंक्स और हैश

यह तब हो सकता है जब वेबपैक चर्स और हैश का उपयोग मिनरलिफिकेशन और असंगति के माध्यम से टसरप्लुगिन (वर्तमान में संस्करण 1.2.3 पर) के माध्यम से करता है। मेरे मामले में त्रुटि मेरे vendors.[contenthash].jsबंडल के टेरर प्लगिन द्वारा कुरूपीकरण तक सीमित कर दी गई थी जो मेरे पास हैnode_modules । हैश का उपयोग नहीं करने पर सब कुछ काम किया।

घोल को अछूता विकल्पों में बंडल को बाहर करना था:

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

और जानकारी

Comments

इससे वास्तव में मेरे लिए समस्या हल हो गई, हालांकि मैं अपराधी को इंगित करने में सक्षम था और इसलिए अंत में मैं कुरूपता को लागू करने में सक्षम था। मेरा जवाब देखें - प्रतिक्रिया-चकाचौंध।

— इरेज कोहेन

मैं terser प्लगइन के लिए संकुचित हो गया, अंततः 3.2.0 संस्करण के लिए प्रतिक्रिया-स्क्रिप्ट बदलकर मेरे लिए समस्या को निर्धारित किया।

— avck

Answer 14

मेरे पास एक ही मुद्दा है, बस से बदलना Navigatorहै{Navigator}

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

Comments

मूल रूप से यह इस तरह मेल खाना चाहिए: export Foo ... import { Foo } - या - export default Foo ... import Foo

— dpren

Answer 15

इस उत्तर के लिए सही नहीं है, लेकिन एक ही त्रुटि के साथ दूसरों के लिए मेरी हास्यास्पद मूर्खतापूर्ण गलती संभावित मदद कर सकती है।

मूर्खतापूर्ण रूप से, मेरा मुद्दा वर्ग नाम का अनुसरण () शामिल करके फ़ंक्शन संकेतन का उपयोग कर रहा था ।

सुनिश्चित करें कि आपका सिंटैक्स सही है। और आपने किसी बाहरी घटक / मॉड्यूल को सही नामों और रास्तों से आयात और निर्यात किया है।

यदि आपके पास प्रतिक्रिया का एक नया संस्करण स्थापित है तो यह टेम्पलेट ठीक काम करना चाहिए:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Answer 16

मेरी शर्तें

• बनाएं-प्रतिक्रिया-ऐप
• प्रतिक्रिया-लिपियों v3.2
• Froala समृद्ध पाठ संपादक v3.1
• विकास मोड ठीक काम किया
• प्रश्न में उल्लिखित त्रुटि के साथ उत्पादन बिल्ड टूट गया था

मेरी समस्या का समाधान

डाउनग्रेड फ्रॉला को v3.0।

V3.1 में कुछ ने हमारी क्रिएट रिएक्ट ऐप बिल्ड प्रक्रिया को तोड़ दिया।

अद्यतन: उपयोग स्क्रिप्ट्स v3.3

हमने पाया कि रिएक्ट स्क्रिप्स 3.2 और फ्रॉला 3.1 के बीच एक मुद्दा था।

प्रतिक्रियाओं को अपडेट करने के लिए v3.3 ने हमें फ्रॉला 3.1 में अपग्रेड करने की अनुमति दी।

Comments

मैं तुमसे प्यार करता हूँ। मैं आप पाते हैं और अपने पैरों को चूमने के लिए आना चाहते हैं !!!!!!!!!!!!!!!!!!!!!!!!! (दुःस्वप्न सब पर

— काबू

मैं क्रिएट रिएक्शन ऐप का उपयोग नहीं कर रहा हूं, लेकिन फ्रॉला 3.1 के साथ उत्पादों पर एक ही मुद्दे का सामना कर रहा हूं। क्या आप बता सकते हैं कि यहाँ क्या मुद्दा था?

— करण जरीवाला

Answer 17

मैंने लिखा है

React.component

के बजाय ( React.Component यह मेरा मुद्दा था)) और आधे घंटे से अधिक समय से यह देख रहा था।

Answer 18

मेरे मामले में मैं उपयोग कर रहा था:

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

जो गलत था लेकिन सही है:

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

यह भी सुनिश्चित करें कि ˣ नहीं
√ या हैReact.Component

React.componentReact.Components

Comments

एसओ में आपका स्वागत है। ऐसा लगता है कि ओपी ने यह गलती नहीं की है क्योंकि उन्होंने सवाल में पहले से ही सही फॉर्म को शामिल किया है। क्या आप ओपी के समान त्रुटि प्राप्त कर रहे थे लेकिन एक अलग कारण के साथ?

— एडुआर्डो

हां, मुझे ओपी के रूप में एक ही त्रुटि मिल रही थी लेकिन मैंने पाया कि कारण अलग था और आशा है कि इससे दूसरों को मदद मिलेगी।

— कुश गौतम

Answer 19

इसके कारण कोई तृतीय पक्ष पैकेज हो सकता है। हमारे मामले में यह प्रतिक्रिया-चकाचौंध थी । हमारे पास @steine ​​के समान सेटिंग्स हैं ( ऊपर इस उत्तर को देखें) )।

समस्याग्रस्त पैकेज को खोजने के लिए मैंने उत्पादन मोड के साथ स्थानीय रूप से वेबपैक का निर्माण किया और इस प्रकार स्टैक ट्रेस में समस्याग्रस्त पैकेज को खोजने में सक्षम था। तो हमारे लिए यह समाधान प्रदान करता है और मैं कुरूपता को दूर रखने में सक्षम था।

Answer 20

अगर मैं export defaultकिसी और के साथ संयोजन में अभिव्यक्ति का उपयोग करने की कोशिश करता हूं तो मुझे बैबल (5.8) का उपयोग करने में त्रुटि होती है export:

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

Answer 21

यहाँ एक जवाब है:

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

Comments

बिल्कुल मेरी टाइपो

— एवेंड्रो पोमट्टी

Answer 22

मेरे मामले में, मैंने इस त्रुटि को बदलकर ठीक export default class yourComponent extends React.Component() {}कर दिया है export default class yourComponent extends React.Component {}। हाँ, कोष्ठक ()त्रुटि को हटा दें ।

Answer 23

मैंने इस त्रुटि का अनुभव किया जैसे कि घटक को आयात करना:

import React, { Components } from 'react';

के बजाय

import React, { Component } from 'react';

Answer 24

देखो कि क्या आपके आयात या आपकी कक्षा की पीढ़ी में कोई टाइपो त्रुटि है, यह बस हो सकता है।

Answer 25

बदलें import React from 'react-domकरने के लिए import React, {Component} from 'react'
और परिवर्तन class Classname extends React.Componentकरने के लिए class Classname extends Component
आप के नवीनतम संस्करण का उपयोग कर रहे हैं, तो प्रतिक्रिया (16.8.6 अब के रूप में) ।

Answer 26

यदि आप इस त्रुटि को प्राप्त कर रहे हैं और Browserify और Browserify -shim (जैसे Grunt task) का उपयोग कर रहे हैं , तो आपको एक मूक क्षण का अनुभव हो सकता है जैसे मैंने अनजाने में कहा थाbrowserify-shim React को वैश्विक नामस्थान के पहले से ही भाग के रूप में माना था (उदाहरण के लिए, एक सीडीएन से लोड)।

यदि आप चाहते हैं कि परिवर्तन के भाग के रूप में React को शामिल करें, और एक अलग फ़ाइल नहीं है, तो सुनिश्चित करें कि आपकी फ़ाइल में अनुभाग अनुभाग में "react": "global:React"दिखाई नहीं देता है ।"browserify-shim"packages.json

Comments

Uncaught Error: Cannot find module 'react'Browserify-shim config को हटाने के बाद आप कैसे बचें ? मूल रूप से मैं प्रतिक्रिया को एक बाहरी निर्भरता के रूप में रखना चाहता हूं, लेकिन ब्राउज़र को समझ में नहीं आता है कि बंडल कैसे बनाएं और रिएक्ट को बाहरी कैसे रखें। ऐसा हो भी सकता है और नहीं भी क्योंकि मेरे ब्राउजर में एंट्री पॉइंट में मैं जिस मॉड्यूल को शामिल कर रहा हूं उसमें एक निर्भरता के रूप में प्रतिक्रिया है।

— dmarr

FWIW, Browserify-shim config से प्रतिक्रिया को हटाने और ब्राउज़र को निर्भरता में सामंजस्य स्थापित करने देता है जो आमतौर पर OP के मुद्दे में परिणाम देता है।

— dmarr

Answer 27

यह तब भी हो सकता है जब आपने अपने कोड requireके importभीतर उपयोग किया था ।

Answer 28

जब मैंने इसका इस्तेमाल किया तो मुझे भी हुआ:

class App extends React.Component(){

}

सही के बजाय:

class App extends React.Component{

}

सूचना: - (पहले) में जो इस समस्या का मुख्य कारण है

Answer 29

उपयोग करने वालों के लिए react-native:

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

यह त्रुटि उत्पन्न कर सकता है।

जबकि reactसीधे संदर्भित करने के लिए जाने के लिए अधिक स्थिर तरीका है:

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

Answer 30

मेरे मामले में यह React.Element में बदलकर React.Component था जो इस त्रुटि के लिए ठीक करता है।