catchjs 오류 발생 Uncaught TypeError : 수퍼 표현식은 정의되지 않은 null 또는 함수 여야합니다.

reactjs를 사용하고 있습니다.

아래 코드를 실행하면 브라우저에 다음과 같이 말합니다.

잡히지 않은 TypeError : 슈퍼 표현식은 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>;
  }
}

업데이트 :이 문제에 대해 3 일 동안 지옥 불에 구우면 최신 버전의 반응을 사용하지 않는 것으로 나타났습니다.

글로벌 설치 :

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>

이것이 3 일의 소중한 생명을 구할 수 있기를 바랍니다.

수업 명

당신은 당신이 올바르게라는 이름의 클래스에서 예를 들어 확장하고 확신이 있다면 첫째, React.Component 하지 React.component 또는 React.createComponent을, 당신은 당신의 반작용 버전을 업그레이드해야합니다. 확장 할 클래스에 대한 자세한 내용은 아래 답변을 참조하십시오.

업그레이드 반응

반응은 전용 버전 0.13.0 이후 (지원 소개에 자신의 공식 블로그 게시물을 참조 ES6 스타일 클래스를 지원하고 여기를 .

그 전에는 다음을 사용하십시오.

class HelloMessage extends React.Component

ES6 키워드 ( extends)를 사용하여 ES6으로 정의되지 않은 클래스에서 서브 클래스 를 사용하려고했습니다 class. 이것은 당신이 super정의 등 으로 이상한 행동을했던 이유 일 것입니다 .

예, TL; DR -React v0.13.x로 업데이트하십시오.

순환 종속성

순환 가져 오기 구조가있는 경우에도 발생할 수 있습니다. 한 모듈이 다른 모듈을 가져오고 다른 모듈을 가져옵니다. 이 경우 코드를 피하기 위해 코드를 리팩터링하면됩니다. 더 많은 정보

당신이해야 서브 클래스 뭔가 원하는이 의미 Class하지만입니다 undefined. 그 이유는 다음과 같습니다.

• 오타 Class extends ...이므로 정의되지 않은 변수를 확장하십시오.
• 오타가 import ... from있으므로 undefined모듈에서 가져옵니다.
• 참조 된 모듈에 값이 포함되어 있지 않으므로 가져 오기 (예 : 더 이상 사용되지 않는 모듈-React의 경우)를 원하므로 기존 값이 아닌 값을 가져옵니다 ( undefined)
• 참조 된 모듈 export ...명령문의 오타 이므로 정의되지 않은 변수를 내 보냅니다.
• 참조 모듈 누락 export문이 있으므로 내보내기 만합니다.undefined

또한 오타 오류로 인해 발생할 수 있으므로 Component대문자 C 대신 componentc가 낮습니다. 예를 들면 다음과 같습니다.

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

참고 : 이 오류의 원인은 React소문자로 시작하는 반응 방법 또는 속성이어야하지만 다음에 오는 것은 자동으로 생각되지만 대문자로 시작 해야하는 또 다른 클래스 ( 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';

실제로 확장하는 클래스가 있는지 확인하십시오 .React 메소드는 감가 상각 'React.Components'되지 않으며 대신 오타 일 수도 있습니다'React.Component'

행운을 빕니다!!

나는 또 다른 가능한 해결책을 제시하려고 노력했다. 편의 색인을 사용하여 모든 구성 요소를 하나의 파일로 수집했습니다.

나는 글을 쓰는 시점에 babel이 공식적으로 지원한다고 생각하지 않으며 typescript를 스핀에 던지지 만 많은 프로젝트에서 사용되는 것을 보았고 확실히 편리합니다.

그러나 상속과 함께 사용하면 위의 질문에 표시된 오류가 발생하는 것으로 보입니다.

간단한 해결책은 부모 역할을하는 모듈을 편의 색인 파일 대신 직접 가져와야한다는 것입니다.

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

TerserPlugin의 Uglification을 사용한 Webpack 4 청크 및 해시

이는 Webpack이 TerserPlugin (현재 버전 1.2.3)을 통해 최소화 및 비 확대와 함께 청크와 해시를 사용할 때 발생할 수 있습니다. 내 경우에는 내 vendors.[contenthash].js번들 의 Terser 플러그인에 의해 오류가 발생했습니다 node_modules. 해시를 사용하지 않을 때 모든 것이 작동했습니다.

해결책은 수정 옵션에서 번들을 제외하는 것입니다.

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'

이 답변에는 맞지 않지만 같은 오류가있는 다른 사람들에게는 어리석게 바보 같은 실수가 잠재적으로 도움이 될 수 있습니다.

어리석게도, 내 문제는 클래스 이름 뒤에 ()를 포함하여 함수 표기법을 사용하는 것이 었습니다 .

구문이 올바른지 확인하십시오. 올바른 이름과 경로를 가진 외부 구성 요소 / 모듈을 가져오고 내보냈습니다.

최신 버전의 반응이 설치되어 있으면이 템플릿이 제대로 작동합니다.

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

내 조건

• Create-React-App
• 반응 스크립트 v3.2
• Froala 리치 텍스트 편집기 v3.1
• 개발 모드가 잘 작동했습니다
• 질문에 언급 된 오류로 생산 빌드가 중단되었습니다.

내 문제에 대한 해결책

Froala를 v3.0으로 다운 그레이드하십시오.

v3.1의 무언가가 Create React App 빌드 프로세스를 중단했습니다.

업데이트 : 반응 스크립트 v3.3 사용

우리는 React Scripts 3.2와 Froala 3.1 사이에 문제가 있음을 발견했습니다.

React Scripts v3.3으로 업데이트하면 Froala 3.1로 업그레이드 할 수있었습니다.

나는 썼다

React.component

그 대신 React.Component 내 문제였습니다))) 30 분 이상을 찾고있었습니다.

제 경우에는 다음을 사용했습니다.

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
NOT
ˣ React.component또는React.Components

이로 인해 타사 패키지가있을 수 있습니다. 우리의 경우에 그것은 반작용 이었다 . @steine과 비슷한 설정 이 있습니다 ( 위의 답변 참조). ).

문제가있는 패키지를 찾기 위해 프로덕션 모드로 로컬에서 webpack 빌드를 실행하여 스택 추적에서 문제가있는 패키지를 찾을 수있었습니다. 그래서 우리에게 이것은 해결책을 제공했으며 추론을 유지할 수있었습니다.

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

이 오류가 발생하고 Grunt 작업에서와 같이 Browserify 및 browserify -shim 을 사용하는 경우 의도하지 않게 browserify-shimReact를 이미 전역 네임 스페이스의 일부로 취급하도록 지시 한 것처럼 바보 같은 순간을 경험했을 수 있습니다 (예 : 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로 변경되었습니다.