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

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

React JS를 사용하고 있습니다.

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

수집되지 않은 유형 오류:슈퍼 표현식은 정의되지 않은 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.createComponent가 아닌 컴포넌트.React 버전을 업그레이드해야 할 수 있습니다.확장할 클래스에 대한 자세한 내용은 아래 답변을 참조하십시오.

업그레이드 리액트

React는 버전 0.13.0 이후 ES6 스타일의 클래스만 지원했습니다(지원 소개에 대한 공식 블로그 게시 참조).

그 전에, 다음을 사용할 때:

class HelloMessage extends React.Component

ES6 (((((((((()를 사용하려고 했습니다.extends ES6를 되지 않은 를 만듭니다class 에, 당신은 가능성이 super정의 등

네, TL;DR - React v0.13.x로 업데이트합니다.

순환 의존 관계

순환 가져오기 구조를 사용하는 경우에도 이 문제가 발생할 수 있습니다.어떤 모듈이 다른 모듈을 Import하고 그 반대도 Import합니다.이 경우 코드를 리팩터링하여 회피하면 됩니다.상세 정보

, '를 원한다는 인데, '아부류'는 '아부류'여야 합니다.을 사용하다Class단, , 입니다.undefined을 사용하다

• 를 치다Class extends ... variable을
• 를 치다import ... from '가져오기'를 거예요undefined
• 값이 않기 (예를 들어 모듈 - 케이스 ).하지 않는값(「」는 「Import」는 「Import」(「:」-「React」)를 합니다. Import하다undefined)
• 된 모듈의 " " "export ...
• 모듈이 .export전혀 에 그냥 할 수 있습니다.undefined

도 있기 에 오타가 오타가 일 수도 .Component대문자 C는 다음과 같습니다.component가 작을 때 사용합니다.

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

순환 의존성이 있을 때 이 오류를 본 적이 있습니다.

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

, 「이것」을 있는 할 수 .React.Component()클래스 정의에서 사용할 수 있습니다.

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

상태 비저장 기능 컴포넌트에서 클래스로 변환할 때 이 작업을 수행할 수 있습니다.

JSX 클래스의 export 스테이트먼트를 놓쳤을 때 이런 일이 있었습니다.

예를 들어 다음과 같습니다.

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

다른 사람에게는 이 문제가 발생할 수 있습니다., 「 」, 「 」, 「 」, 「 」가 되어 있는 것도 확인할 수 .component in the method in the method in 。React.Component대문자로 표시됩니다.저도 같은 문제가 있었고, 그 원인은 다음과 같이 썼습니다.

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

로 바꿨습니다.

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

모든 것이 잘 되었다

TerserPlugin에 의한 Ugliation 기능을 갖춘 Webpack 4 Chunks and Hash

이 문제는 웹 팩이 TerserPlugin(현재 버전 1.2.3)을 통해 최소화와 통합으로 청크와 해시를 사용하는 경우에 발생할 수 있습니다.내 경우, 오류는 내 Terser 플러그인에 의한 uglification으로 좁혀졌다.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;
      },
    }),
  ],
}

상세 정보

수입품에 오타가 있을 때 받았습니다.

import {Comonent} from 'react';

존재하는지 없습니다.도 있습니다. 감가상각되는 반응 메서드는 거의 없습니다.오타 오류일 수도 있습니다.'React.Components''React.Component'

행운을 빈다!!

나는 나에게 효과가 있었던 다른 가능한 해결책에 기여할 것이다.편의성 색인을 사용하여 모든 구성 요소를 하나의 파일로 수집했습니다.

글을 쓸 당시에는 이것이 공식적으로 babel에 의해 지원되고 있다고 생각하지 않고, 타이프 스크립트를 스핀에 넣는다고 생각합니다만, 많은 프로젝트에서 사용되고 있어 편리합니다.

그러나 상속과 조합하여 사용하면 위의 질문에서 제시된 오류를 발생시킬 수 있습니다.

간단한 해결책은 부모 역할을 하는 모듈의 경우 편의 색인 파일이 아닌 직접 가져올 필요가 있다는 것입니다.

./src/컴포넌트/index.displaces

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

./src/컴포넌트/com-1/Com1.js

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

./src/컴포넌트/com-3/Com3.js

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

./src/컴포넌트/com-3/Com3.js

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

도 같은요. 요.그냥 변경해 주세요.Navigator로로 합니다.{Navigator}

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

이 방법은 효과가 있었습니다.

import React, {Component} from 'react';

나의 조건

• 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로 업그레이드할 수 있었습니다.

이 답변은 정확하지 않지만 같은 오류를 가진 다른 사람들에게 나의 어리석은 실수가 잠재적으로 도움이 될 수 있다.

우습게도, 나의 문제는 클래스 이름 뒤에 ()를 포함시켜 함수 표기법을 사용하는 것이었습니다.

구문이 올바른지 확인하십시오.또한 올바른 이름과 경로를 가진 외부 컴포넌트/모듈을 Import 및 내보냈습니다.

이 템플릿은 새로운 버전의 react가 설치되어 있는 경우 정상적으로 동작합니다.

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

나는 썼다

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
}

,, 는, 있, 있 also also also also also
√React.Component
.
ˣReact.component ""React.Components

구성 요소를 가져오는 동안 다음과 같은 오류가 발생했습니다.

import React, { Components } from 'react';

대신

import React, { Component } from 'react';

서드파티 패키지가 원인일 수 있습니다.우리의 경우 그것은 반응 현기증이었다.@steine과 설정이 비슷합니다(위의 답변 참조).

문제가 있는 패키지를 찾기 위해 webpack build를 프로덕션 모드로 로컬로 실행했기 때문에 스택 트레이스에서 문제가 있는 패키지를 찾을 수 있었습니다.그래서 우리는 이것이 해결책을 제시했고 나는 유화를 유지할 수 있었다.

import React from 'react-dom로로 합니다.import React, {Component} from 'react'
★★★★★★★★★★★★★★★★★★★class Classname extends React.Component로로 합니다.class Classname extends Component
최신 버전의 React를 사용하는 경우(현재 16.8.6).

.8하면 Babel(5.8)을 오류가 합니다.export default 것과 병용하여export:

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

이것을 사용했을 때, 저도 같은 일이 있었습니다.

class App extends React.Component(){

}

올바른 것 대신:

class App extends React.Component{

}

주의: 이 문제의 주요 원인인 첫 번째 ()에 기재되어 있습니다.

답은 다음과 같습니다.

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

이 하고 수정했습니다.export default class yourComponent extends React.Component() {}로로 합니다.export default class yourComponent extends React.Component {}, 괄호를 ()오류를 수정했습니다.

가져오기 또는 클래스 생성에서 오타가 있는 경우, 단순하게 그런 것일 수 있습니다.

이 에러는 webpack에 의해 생성된 번들의 '댓글' 때문에 발생하는 것을 보았습니다.webpack.config.dll에서 'pathinfo'= true를 사용하면 다음과 같은 문제가 발생할 수 있습니다.

webpack.config.syslog

module.exports = {
  output: {
    pathinfo: true,
  }
}

'pathinfo'는 개발 모드에서는 기본적으로 true로, 운영 모드에서는 false로 설정됩니다.https://webpack.js.org/configuration/output/ #outpathinfo 이 값을 false로 설정하여 문제를 해결합니다.

이 문제는 플러그인을 사용하여 빌드 출력에서 주석을 제거하지 않은 경우에도 발생할 수 있습니다.UglifyJs(https://www.npmjs.com/package/uglifyjs-webpack-plugin/v/1.3.0)를 사용해 보십시오.

webpack.config.syslog

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  ...
  optimization: {
    minimizer: [new UglifyJsPlugin(
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false
          }
        }
      }),
    )],
  }
}

컴포넌트 이름에 철자/소문자 오류가 있을 수 있습니다.예를 들어 다음과 같습니다.

class HelloMessage extends React.Component

class HelloMessage extends React.component

확인해주세요.

이 오류가 발생하여 Browserify 및 Browserify-shim(Grunt 태스크에서처럼)을 사용하고 있는 경우, 의도하지 않게 다음과 같은 어처구니없는 순간을 경험했을 수 있습니다.browserify-shimReact를 글로벌 네임스페이스의 이미 일부로 취급합니다(예를 들어 CDN에서 로드).

는, 「Browserify」React 행을 ."react": "global:React"."browserify-shim"의 항을 참조하십시오.packages.jsonfilename을 클릭합니다.

이 문제는 또한 다음과 같은 기능을 사용하여도 발생할 수 있습니다.requireimport당신의 코드 안에.

언급URL : https://stackoverflow.com/questions/30116430/reactjs-giving-error-uncaught-typeerror-super-expression-must-either-be-null-or