reactjsがエラーUncaught TypeErrorを返す：スーパー式は未定義ではなく、nullまたは関数でなければなりません

私はreactjsを使用しています。

ブラウザの下のコードを実行すると、次のようになります。

Uncaught 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日間地獄の火で燃やした後、最新バージョンのreactを使用していないことがわかりました。

グローバルにインストール：

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を、あなたのリアクトバージョンをアップグレードする必要があるかもしれません。拡張するクラスの詳細については、以下の回答を参照してください。

Reactのアップグレード

Reactがサポートしているのは、バージョン0.13.0以降のES6スタイルのクラスのみです（こちらのサポートの紹介に関する公式ブログの投稿を参照してください）。

その前に、使用する場合：

class HelloMessage extends React.Component

ES6を使用してextends定義されていないクラスからサブクラス化するためにES6キーワード（）を使用しようとしましたclass。これが、super定義などで奇妙な動作に遭遇した理由である可能性があります。

したがって、はい、TL; DR -React v0.13.xに更新します。

循環依存

これは、循環インポート構造がある場合にも発生する可能性があります。1つのモジュールが別のモジュールをインポートし、その逆を行います。この場合、コードをリファクタリングして回避する必要があります。より詳しい情報

あなたがする必要がありますサブクラス何か、したい。この手段でClassはなく、ですがundefined。理由は次のとおりです。

• typo in Class extends ...なので、未定義の変数を拡張します
• typo in import ... fromなのでundefined、モジュールからインポートします
• 参照されたモジュールに値が含まれていないため、インポートする必要がある（たとえば、廃止されたモジュール-Reactのケース）ため、存在しない値（undefined）
• 参照されたモジュールexport ...ステートメントにタイプミスがあるため、未定義の変数をエクスポートします
• 参照されたモジュールにexportステートメントがまったくないため、エクスポートするだけですundefined

これはタイプミスによっても発生する可能性があるためComponent、大文字のC ではなく、component小文字のcを使用します。次に例を示します。

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'

幸運を！！

私は別の可能な解決策を提供するつもりです。すべてのコンポーネントを1つのファイルに収集するために便利なインデックスを使用していました。

これを書いている時点では、これは正式に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を保持してnode_modulesいる私のバンドルのTerserプラグインによって、醜化に絞り込まれました。ハッシュを使用しない場合、すべてが機能しました。

解決策は、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 

私の状態

• Create-React-App
• React-scripts 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
ませ
ˣ React.componentかReact.Components

これを引き起こすサードパーティのパッケージがあるかもしれません。私たちの場合は、反応が眩しいです。@steineと同様の設定があります（上記の回答を参照）。

問題のあるパッケージを見つけるために、プロダクションモードでローカルにwebpackビルドを実行し、スタックトレースで問題のあるパッケージを見つけることができました。私たちにとって、これは解決策を提供し、私は醜態を維持することができました。

Babel（5.8）を使用して、export default他の式と組み合わせて式を使用しようとすると、同じエラーが発生しますexport。

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

ここに1つの答えがあります：

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-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への変更でした。