Reacjs đưa ra lỗi Uncaught TypeError: Siêu biểu thức phải là null hoặc hàm, không được xác định

Tôi đang sử dụng Reacjs.

Khi tôi chạy mã bên dưới trình duyệt nói:

Uncaught TypeError: Siêu biểu thức phải là null hoặc hàm, không được xác định

Bất kỳ gợi ý nào về những gì sai sẽ được đánh giá cao.

Đầu tiên, dòng được sử dụng để biên dịch mã:

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

Và mã:

var React = require('react');

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

CẬP NHẬT: Sau khi đốt cháy trong địa ngục trong ba ngày về vấn đề này, tôi thấy rằng tôi đã không sử dụng phiên bản mới nhất của phản ứng.

Cài đặt trên toàn cầu:

sudo npm install -g react@0.13.2

cài đặt cục bộ:

npm install react@0.13.2

đảm bảo trình duyệt cũng đang sử dụng đúng phiên bản:

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

Hy vọng điều này sẽ cứu người khác ba ngày của cuộc sống quý giá.

Tên lớp

Đầu tiên, nếu bạn chắc chắn rằng bạn đang mở rộng từ lớp được đặt tên chính xác, ví dụ React.Component , không phải React.component hoặc React.createComponent, bạn có thể cần nâng cấp phiên bản React của mình. Xem câu trả lời dưới đây để biết thêm thông tin về các lớp để mở rộng từ.

Nâng cấp React

React chỉ hỗ trợ các lớp kiểu ES6 kể từ phiên bản 0.13.0 (xem bài đăng trên blog chính thức của họ trên phần giới thiệu hỗ trợ tại đây .

Trước đó, khi sử dụng:

class HelloMessage extends React.Component

bạn đã cố sử dụng các từ khóa ES6 ( extends) để phân lớp từ một lớp không được xác định bằng ES6 class. Đây có thể là lý do tại sao bạn gặp phải hành vi lạ với các superđịnh nghĩa, v.v.

Vì vậy, có, TL; DR - cập nhật lên React v0.13.x.

Phụ thuộc thông tư

Điều này cũng có thể xảy ra nếu bạn có cấu trúc nhập khẩu tròn. Một mô-đun nhập khẩu khác và cách khác xung quanh. Trong trường hợp này, bạn chỉ cần cấu trúc lại mã của mình để tránh nó. Thêm thông tin

Đây có nghĩa là bạn muốn lớp con điều gì đó, mà nên Class, nhưng là undefined. Những lý do có thể là:

• lỗi đánh máy Class extends ..., vì vậy bạn mở rộng biến không xác định
• lỗi đánh máy import ... from, vì vậy bạn nhập undefinedtừ mô-đun
• mô-đun được tham chiếu không chứa giá trị, bạn muốn nhập (ví dụ mô-đun lỗi thời - trường hợp với React), vì vậy bạn nhập giá trị không tồn tại ( undefined)
• lỗi đánh máy trong export ...câu lệnh mô đun được tham chiếu , do đó nó xuất biến không xác định
• tham chiếu thiếu exporttuyên bố mô-đun , vì vậy nó chỉ xuấtundefined

Nó cũng có thể được gây ra bởi một lỗi đánh máy, vì vậy thay vì Componentvới chữ C, bạn có componentc thấp hơn, ví dụ:

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

Lưu ý: Nguồn gốc của lỗi này có thể là do có Reactvà chúng tôi nghĩ tự động những gì tiếp theo sẽ là một phương thức phản ứng hoặc thuộc tính bắt đầu bằng một chữ cái viết thường, nhưng thực tế nó là một Class ( Component) nên bắt đầu bằng một chữ cái viết hoa .

Trong trường hợp của tôi, với Reac -igen, lỗi là tôi đã có

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

thay vì

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

Tôi đã trải nghiệm điều này khi thiếu một câu lệnh xuất khẩu cho lớp JSX.

Ví dụ:

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

Bạn cũng có thể nhận được điều này nếu bạn đang cố thực hiện React.Componentvới một lỗi sai ()trong định nghĩa lớp của bạn.

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

Điều mà đôi khi tôi quản lý để làm khi tôi chuyển đổi từ một thành phần chức năng không trạng thái sang một lớp.

Tôi đã thấy lỗi này khi bạn có một phụ thuộc tròn.

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

Đối với bất kỳ người nào khác, điều đó có thể phát triển vấn đề này. Bạn cũng có thể kiểm tra xem componentphương thức React.Componentđược viết hoa. Tôi đã có cùng một vấn đề và những gì gây ra nó là tôi đã viết:

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

Tôi đã đổi nó thành

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

và mọi thứ hoạt động tốt

Tôi đã nhận được điều này khi tôi có một lỗi đánh máy khi nhập:

import {Comonent} from 'react';

Kiểm tra các Lớp bạn mở rộng thực sự tồn tại, một vài phương thức React bị khấu hao, Nó cũng có thể là lỗi Typo 'React.Components'thay vì'React.Component'

Chúc may mắn!!

Tôi sẽ đóng góp một giải pháp khả thi khác, một giải pháp hiệu quả cho tôi. Tôi đã sử dụng chỉ số tiện lợi để thu thập tất cả các thành phần vào một tệp.

Tôi không tin vào thời điểm viết bài này được babel hỗ trợ chính thức và ném bản thảo vào một vòng quay - tuy nhiên tôi đã thấy nó được sử dụng trong nhiều dự án và rất tiện lợi.

Tuy nhiên, khi được sử dụng kết hợp với thừa kế, nó dường như ném lỗi được trình bày trong câu hỏi trên.

Một giải pháp đơn giản là, đối với các mô-đun đóng vai trò là cha mẹ cần được nhập trực tiếp thay vì thông qua tệp chỉ mục tiện lợi.

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

Điều này làm việc cho tôi:

import React, {Component} from 'react';

Webpack 4 Chunks và băm với Uglification bởi TerserPlugin

Điều này có thể xảy ra khi Webpack sử dụng các khối và băm với thu nhỏ và không xác định thông qua TerserPlugin (hiện có trên phiên bản 1.2.3). Trong trường hợp của tôi, lỗi đã được thu hẹp đến mức xấu xí bởi Plugin Terser của vendors.[contenthash].jsgói giữ tôi node_modules. Tất cả mọi thứ hoạt động khi không sử dụng băm.

Giải pháp là loại trừ các gói trong các tùy chọn xấu xí:

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

Thêm thông tin

Tôi có cùng một vấn đề, chỉ cần thay đổi từ Navigatorđến{Navigator}

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

Không đúng cho câu trả lời này nhưng đối với những người khác có cùng lỗi thì lỗi lầm ngớ ngẩn của tôi có thể có khả năng giúp đỡ.

Ngớ ngẩn, vấn đề của tôi là sử dụng ký hiệu hàm bằng cách bao gồm () theo tên lớp .

Hãy chắc chắn rằng cú pháp của bạn là chính xác. Và bạn đã nhập và xuất bất kỳ thành phần / mô-đun bên ngoài nào với tên và đường dẫn chính xác.

Mẫu này sẽ hoạt động tốt nếu bạn đã cài đặt phiên bản phản ứng mới:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Điều kiện của tôi

• Tạo-Phản ứng-Ứng dụng
• React-scripts v3.2
• Froala trình soạn thảo văn bản phong phú v3.1
• Chế độ phát triển hoạt động tốt
• Bản dựng sản xuất đã bị hỏng với lỗi được đề cập trong câu hỏi

Giải pháp cho vấn đề của tôi

Hạ cấp Froala xuống v3.0.

Một cái gì đó trong v3.1 đã phá vỡ quy trình xây dựng Ứng dụng Tạo phản ứng của chúng tôi.

Cập nhật: Sử dụng tập lệnh phản ứng v3.3

Chúng tôi đã phát hiện ra rằng có một vấn đề giữa React ScScript 3.2 và Froala 3.1.

Cập nhật lên React ScScript v3.3 cho phép chúng tôi nâng cấp lên Froala 3.1.

Tôi đã viết

React.component

thay vì React.Component đó là vấn đề của tôi)) và đã tìm kiếm điều này hơn nửa giờ.

Trong trường hợp của tôi, tôi đã sử dụng:

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

Điều đó sai nhưng đúng là:

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

cũng đảm bảo có
√ React.Component
KHÔNG
ˣ React.componenthoặcReact.Components

Có thể có một gói bên thứ ba gây ra điều này. Trong trường hợp của chúng tôi, đó là phản ứng - lóa mắt . Chúng tôi có các cài đặt tương tự như của @steine ​​( xem câu trả lời này ở trên ).

Để tìm gói có vấn đề, tôi đã chạy webpack build cục bộ với chế độ sản xuất và do đó có thể tìm thấy gói có vấn đề trong theo dõi ngăn xếp. Vì vậy, đối với chúng tôi điều này đã cung cấp giải pháp và tôi đã có thể giữ sự xấu xí.

Sử dụng Babel (5.8) Tôi gặp lỗi tương tự nếu tôi cố gắng sử dụng biểu thức export defaultkết hợp với một số khác export:

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

Đây là một câu trả lời:

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

Trong trường hợp của tôi, tôi đã sửa lỗi này bằng cách thay đổi export default class yourComponent extends React.Component() {}thành export default class yourComponent extends React.Component {}. Có xóa dấu ngoặc đã ()sửa lỗi.

Tôi gặp lỗi này khi nhập thành phần như:

import React, { Components } from 'react';

thay vì

import React, { Component } from 'react';

Hãy xem nếu bạn có một lỗi đánh máy trong quá trình nhập hoặc thế hệ lớp của bạn, nó có thể chỉ đơn giản là như vậy.

Thay đổi import React from 'react-domthành import React, {Component} from 'react'
Và thay đổi class Classname extends React.Componentthành class Classname extends Component
Nếu bạn đang sử dụng phiên bản React mới nhất (16.8.6 tính đến thời điểm hiện tại) .

Nếu bạn đang nhận được lỗi này và đang sử dụng Browserify và browserify -shim (như trong tác vụ Grunt), bạn có thể đã trải qua một khoảnh khắc ngớ ngẩn như tôi đã làm khi bạn vô tình nóibrowserify-shim hãy coi React như một phần của không gian tên toàn cầu (ví dụ: được tải từ CDN).

Nếu bạn muốn Browserify bao gồm React như một phần của biến đổi, và không phải là một tệp riêng biệt, hãy đảm bảo rằng dòng "react": "global:React"không xuất hiện trong "browserify-shim"phần trong packages.jsontệp của bạn .

Điều này cũng có thể xảy ra nếu bạn đã sử dụng requirethay vì importtrong mã của mình.

Đã xảy ra với tôi khi tôi sử dụng này:

class App extends React.Component(){

}

Thay vì đúng:

class App extends React.Component{

}

Lưu ý: - () trong trường hợp đầu tiên là nguyên nhân chính của vấn đề này

Đối với những người sử dụng react-native:

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

có thể tạo ra lỗi này.

Trong khi tham khảo reacttrực tiếp là cách ổn định hơn để đi:

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

Trong trường hợp của tôi, đó là React.Euity thay đổi thành React.Component giúp khắc phục lỗi này.