reactjs ให้ข้อผิดพลาด Uncaught TypeError: การแสดงออกที่ยอดเยี่ยมจะต้องเป็นโมฆะหรือฟังก์ชั่นไม่ได้ไม่ได้กำหนด

ฉันใช้ reactjs

เมื่อฉันเรียกใช้รหัสด้านล่างเบราว์เซอร์กล่าวว่า:

Uncaught TypeError: Super expression ต้องเป็น Null หรือฟังก์ชั่นโดยไม่ได้กำหนด

คำแนะนำใด ๆ ที่เป็นสิ่งที่ผิดจะได้รับการชื่นชม

บรรทัดแรกที่ใช้ในการรวบรวมรหัส:

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>

หวังว่านี่จะช่วยชีวิตคนล้ำค่าอีกสามวัน

ชื่อคลาส

ประการแรกหากคุณมั่นใจว่าคุณกำลังขยายจากคลาสที่มีชื่ออย่างถูกต้องเช่นReact.Componentไม่ใช่ React.component หรือ React.createCreonComponent คุณอาจต้องอัพเกรดเวอร์ชั่น React ของคุณ ดูคำตอบด้านล่างสำหรับข้อมูลเพิ่มเติมเกี่ยวกับชั้นเรียนที่จะขยายออกไป

อัพเกรดการตอบสนอง

ตอบสนองได้รับการสนับสนุนเฉพาะการเรียน ES6 สไตล์ตั้งแต่รุ่น 0.13.0 (ดูโพสต์บล็อกของพวกเขาอย่างเป็นทางการเกี่ยวกับการแนะนำการสนับสนุนที่นี่

ก่อนหน้านั้นเมื่อใช้:

class HelloMessage extends React.Component

คุณกำลังพยายามที่จะใช้คำหลัก ES6 ( extends) เพื่อ subclass จากชั้นเรียนซึ่งไม่ได้กำหนดโดยใช้ classES6 นี่อาจเป็นเหตุผลว่าทำไมคุณถึงมีพฤติกรรมแปลก ๆ พร้อมsuperคำจำกัดความเป็นต้น

ดังนั้นใช่TL; DR - อัปเดตเป็น React v0.13.x

หนังสือเวียน

สิ่งนี้สามารถเกิดขึ้นได้หากคุณมีโครงสร้างการนำเข้าแบบวงกลม โมดูลหนึ่งนำเข้าอีกโมดูลหนึ่งและอีกทางหนึ่ง ในกรณีนี้คุณเพียงแค่ต้อง refactor รหัสของคุณเพื่อหลีกเลี่ยงมัน ข้อมูลเพิ่มเติม

ซึ่งหมายความว่าคุณต้องการสิ่ง subclass ซึ่งควรจะแต่Class undefinedเหตุผลอาจเป็น:

• พิมพ์ผิดClass extends ...ดังนั้นคุณจึงขยายตัวแปรที่ไม่ได้กำหนด
• พิมพ์ผิดimport ... fromคุณจึงนำเข้าundefinedจากโมดูล
• โมดูลอ้างอิงไม่มีค่าที่คุณต้องการนำเข้า (เช่นโมดูลล้าสมัย - กรณีที่มีการตอบสนอง) ดังนั้นคุณจึงนำเข้าค่าที่ไม่มีอยู่ ( undefined)
• พิมพ์ผิดในexport ...คำสั่งโมดูลอ้างอิงดังนั้นจึงส่งออกตัวแปรที่ไม่ได้กำหนด
• โมดูลที่อ้างถึงไม่มีexportคำสั่งเลยดังนั้นมันจึงส่งออกเพียงอย่างเดียวundefined

นอกจากนี้ยังอาจเกิดจากข้อผิดพลาดการพิมพ์ผิดดังนั้นแทนที่จะใช้ตัวพิมพ์Componentใหญ่ C คุณจะcomponentมีตัวอักษร c ต่ำกว่าตัวอย่างเช่น:

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

หมายเหตุ: แหล่งที่มาของข้อผิดพลาดนี้อาจเป็นเพราะมีReactและเราคิดว่าสิ่งที่เกิดขึ้นต่อไปโดยอัตโนมัติควรเป็นวิธีการตอบสนองหรือคุณสมบัติที่เริ่มต้นด้วยตัวอักษรตัวพิมพ์เล็ก แต่ในความเป็นจริงมันเป็นClassอื่น( Component) .

ในกรณีของฉันมีปฏิกิริยาตอบโต้ข้อผิดพลาดคือฉันมี

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

ฉันพบสิ่งนี้เมื่อไม่มีคำสั่งส่งออกสำหรับคลาส JSX

ตัวอย่างเช่น:

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

คุณสามารถได้รับสิ่งนี้หากคุณพยายามที่จะดำเนินการReact.Componentโดยมีข้อผิดพลาด()ในการกำหนดชั้นเรียนของคุณ

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

ซึ่งบางครั้งฉันก็จัดการทำเมื่อฉันแปลงจากองค์ประกอบการทำงานที่ไร้สัญชาติเป็นชั้นเรียน

ฉันเห็นข้อผิดพลาดนี้เมื่อคุณมีการพึ่งพาแบบวงกลม

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

สำหรับบุคคลอื่น ๆ ที่อาจพัฒนาปัญหานี้ คุณสามารถตรวจสอบได้ว่าcomponentวิธีการReact.Componentเป็นตัวพิมพ์ใหญ่ ฉันมีปัญหาเดียวกันนั้นและสิ่งที่ทำให้ฉันเขียน:

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

ฉันเปลี่ยนเป็น

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

และทุกอย่างทำงานได้ดี

ฉันได้สิ่งนี้เมื่อฉันพิมพ์ผิดเมื่อมีการนำเข้า:

import {Comonent} from 'react';

ตรวจสอบคลาสที่คุณมีอยู่จริง ๆ แล้วมีวิธีการปฏิเสธไม่กี่วิธีซึ่งอาจเป็นข้อผิดพลาด Typo 'React.Components'แทน'React.Component'

โชคดี!!

ฉันจะให้การสนับสนุนอีกวิธีหนึ่งที่เป็นไปได้สำหรับฉัน ฉันใช้ดัชนีความสะดวกในการรวบรวมส่วนประกอบทั้งหมดเป็นไฟล์เดียว

ฉันไม่เชื่อว่าในขณะที่เขียนนี้ได้รับการสนับสนุนอย่างเป็นทางการโดย Babel และโยนตัวพิมพ์เป็นสปิน - อย่างไรก็ตามฉันเคยเห็นมันใช้ในหลาย ๆ โครงการและสะดวกมาก

อย่างไรก็ตามเมื่อใช้ร่วมกับการสืบทอดดูเหมือนว่าจะโยนข้อผิดพลาดที่ปรากฏในคำถามข้างต้น

ทางออกที่ง่ายคือสำหรับโมดูลที่ทำหน้าที่เป็นพาเรนต์ต้องถูกอิมพอร์ตโดยตรงแทนผ่านไฟล์ดัชนีความสะดวกสบาย

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

สิ่งนี้ใช้ได้กับฉัน:

import React, {Component} from 'react';

Webpack 4 ชิ้นส่วนและแฮชที่มี Uglification โดย TerserPlugin

สิ่งนี้สามารถเกิดขึ้นได้เมื่อ Webpack ใช้ชิ้นส่วนและแฮชที่มีการลดขนาดและการไม่รวมผ่าน TerserPlugin (ปัจจุบันเป็นรุ่น 1.2.3) ในกรณีของฉันข้อผิดพลาดก็แคบลงจนถึงการอัปเดตโดยปลั๊กอิน Terser ของvendors.[contenthash].jsชุดข้อมูลของฉันซึ่งเก็บฉันnode_modulesไว้ ทุกอย่างทำงานได้เมื่อไม่ใช้แฮช

วิธีแก้ไขคือการไม่รวมกลุ่มในตัวเลือก uglification:

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

ข้อมูลเพิ่มเติม

ฉันมีปัญหาเดียวกันเพียงแค่เปลี่ยนจากNavigatorเป็น{Navigator}

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

ไม่ถูกต้องสำหรับคำตอบนี้ แต่สำหรับคนอื่นที่มีข้อผิดพลาดเดียวกันความผิดพลาดโง่ ๆ ของฉันก็อาจช่วยได้

โง่ปัญหาของฉันคือการใช้สัญกรณ์ฟังก์ชั่นโดยรวม () ดังต่อไปนี้ชื่อชั้น

ตรวจสอบให้แน่ใจว่าไวยากรณ์ของคุณถูกต้อง และคุณได้นำเข้าและส่งออกส่วนประกอบ / โมดูลภายนอกด้วยชื่อและพา ธ ที่ถูกต้อง

เทมเพลตนี้ควรใช้งานได้ดีถ้าคุณติดตั้ง react รุ่นใหม่แล้ว:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

เงื่อนไขของฉัน

• สร้าง-React-App
• React-scripts v3.2
• โปรแกรมแก้ไขข้อความที่สมบูรณ์Froala v3.1
• โหมดการพัฒนาทำงานได้ดี
• โครงสร้างการผลิตถูกทำลายด้วยข้อผิดพลาดที่กล่าวถึงในคำถาม

วิธีแก้ไขปัญหาของฉัน

ปรับลดรุ่น Froala เป็น v3.0

มีบางสิ่งใน v3.1 ที่สร้างกระบวนการสร้างแอป React ของเราขึ้นมา

อัปเดต: ใช้สคริปต์การตอบสนอง v3.3

เราค้นพบว่ามีปัญหาระหว่าง React Scripts 3.2 และ Froala 3.1

การอัพเดทเป็น React Scripts v3.3 ทำให้เราสามารถอัพเกรดเป็น Froala 3.1 ได้

ฉันได้เขียน

React.component

แทนที่จะReact.Component เป็นปัญหาของฉัน)) และกำลังมองหาสิ่งนี้มากกว่าครึ่งชั่วโมง

ในกรณีของฉันฉันใช้:

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.componentหรือReact.Components

อาจมีแพ็คเกจของบุคคลที่สามที่ทำให้เกิดปัญหานี้ ในกรณีของเรามันก็ตอบสนอง-ทำให้ตาพร่า เรามีการตั้งค่าที่คล้ายกับของ @steine ​​( ดูคำตอบนี้ด้านบน )

เพื่อค้นหาแพ็คเกจที่มีปัญหาฉันใช้งาน webpack build ในเครื่องด้วยโหมดการผลิตและทำให้สามารถค้นหาแพ็คเกจที่มีปัญหาในการติดตามสแต็ก ดังนั้นสำหรับเรานี่เป็นวิธีแก้ปัญหาและฉันก็สามารถรักษาความอัปลักษณ์ได้

ใช้ Babel (5.8) ฉันได้รับข้อผิดพลาดเดียวกันถ้าฉันพยายามใช้นิพจน์export defaultร่วมกับผู้อื่นexport:

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

นี่คือหนึ่งคำตอบ:

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

ในกรณีของฉันฉันคงข้อผิดพลาดนี้จากการเปลี่ยนแปลงที่จะexport default class yourComponent extends React.Component() {} export default class yourComponent extends React.Component {}ใช่ลบวงเล็บ()แก้ไขข้อผิดพลาด

ฉันพบข้อผิดพลาดนี้ขณะนำเข้าส่วนประกอบเช่น:

import React, { Components } from 'react';

แทน

import React, { Component } from 'react';

ดูว่าคุณมีข้อผิดพลาดการพิมพ์ผิดในการนำเข้าหรือการสร้างคลาสของคุณอาจเป็นได้

เปลี่ยนimport React from 'react-domไปimport React, {Component} from 'react'
และเปลี่ยนclass Classname extends React.Componentไปclass Classname extends Component
ถ้าคุณกำลังใช้รุ่นล่าสุดของการตอบสนอง (16.8.6 ณ ขณะนี้)

หากคุณได้รับข้อผิดพลาดนี้และกำลังใช้Browserifyและbrowserify-shim (เช่นในงาน Grunt) คุณอาจประสบกับช่วงเวลาที่โง่เง่าเหมือนที่ฉันเคยทำในที่ที่คุณตั้งใจบอกbrowserify-shimให้ทำปฏิกิริยาเป็นส่วนหนึ่งของเนมสเปซส่วนกลางแล้ว (ตัวอย่างเช่น โหลดจาก CDN)

หากคุณต้องการให้ Browserify รวม React เป็นส่วนหนึ่งของการแปลงไม่ใช่ไฟล์แยกให้แน่ใจว่าบรรทัด"react": "global:React"นั้นไม่ปรากฏใน"browserify-shim"ส่วนในpackages.jsonไฟล์ของคุณ

สิ่งนี้สามารถเกิดขึ้นได้หากคุณใช้requireแทนimportรหัสของคุณ

เกิดขึ้นกับฉันเช่นกันเมื่อฉันใช้สิ่งนี้:

class App extends React.Component(){

}

แทนที่จะเป็นคนที่ใช่:

class App extends React.Component{

}

หมายเหตุ: - () ในอันแรกซึ่งเป็นสาเหตุหลักของปัญหานี้

สำหรับผู้ใช้react-native:

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

อาจทำให้เกิดข้อผิดพลาดนี้

ในขณะที่การอ้างอิงreactโดยตรงเป็นวิธีที่มีเสถียรภาพมากขึ้นไป:

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

ในกรณีของฉันมันเป็น React.Element เปลี่ยนเป็น React.Component ที่แก้ไขข้อผิดพลาดนี้