web-dev-qa-db-ja.com

reactjsエラーが発生しましたTypeError：Super expressionは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日間地獄で燃えた後、私はreactの最新版を使用していないことがわかりました。

グローバルにインストールします。 

Sudo npm install -g [email protected]

ローカルにインストールします。 

npm install [email protected]

ブラウザも正しいバージョンを使用していることを確認してください： 

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

これが他の誰かに3日間の貴重な命を救うことを願っています。

reactjsecmascript-6
219
Duke Dougal

クラス名

まず、正しい名前のクラスから拡張していることが確実な場合は、 React.componentやReact.createComponentではなく、React.Componentを使用する場合は、Reactのバージョンをアップグレードする必要があります。拡張するクラスの詳細については、以下の回答を参照してください。

アップグレードの反応

Reactはバージョン0.13.0以降のES6スタイルのクラスしかサポートしていません（サポート紹介 here の公式ブログ記事を参照）。

その前に、使用するとき：

class HelloMessage extends React.Component

eS6のextendsで定義されていないクラスからサブクラス化するためにES6のキーワード（class）を使用しようとしました。これがsuperの定義などで奇妙な振る舞いをしていた理由です。

そう、はい、TL; DR - React v0.13.xに更新してください。

循環依存関係

循環インポート構造がある場合にも発生する可能性があります。あるモジュールが別のモジュールをインポートし、その逆になっている。この場合は、それを避けるためにコードをリファクタリングするだけです。 詳細情報

273
Jack Preston

これは、サブクラスの何かが必要であることを意味します。それはClassであるべきですが、undefinedです。理由は次のとおりです。

  • Class extends ...のタイプミスなので、未定義の変数を拡張する
  • import ... fromにタイプミスがあるので、モジュールからundefinedをインポートします。
  • 参照されたモジュールは値を含んでいません、あなたはインポートしたいです（例えば時代遅れのモジュール - Reactのケース）、あなたは存在しない値をインポートします（undefined）
  • 参照されているモジュールのexport ...ステートメントに誤植があるので、未定義の変数をエクスポートします。
  • 参照されたモジュールがexportステートメントをまったく持っていないので、undefinedだけをエクスポートします。
118
Vaclav Novotny

タイプミスエラーも原因である可能性があるので、大文字のCを持つComponentの代わりに、より低いcのcomponentを使用します。次に例を示します。

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

注： このエラーの原因はReactがあり、次に来るのは自動的に小文字で始まる反応のあるメソッドまたはプロパティであるべきだと思うかもしれませんが、実際は別のものです Class （Component）これは大文字で始まります。

86
ismnoiet

私の場合は、react-nativeを使用した場合のエラーは、

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

JSXクラスのエクスポートステートメントが欠落しているときにこれを経験しました。

例えば：

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

循環的な依存関係がある場合、私はこのエラーを見ました。

class A extends B {}
class B extends C {}
class C extends A {}
11
Doug

クラス定義でReact.Componentを誤った()で実行しようとしている場合にもこれを受け取ることができます。

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

ステートレスな機能的なコンポーネントからクラスに変換するとき、私は時々することができます。

11
Adam Terlson

他の人にとっては、この問題が発生する可能性があります。 React.Componentのcomponentメソッドが大文字になっていることも確認できます。私は同じ問題を抱えていて、それを引き起こしたのは私が書いたことです：

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

に変更しました

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

そしてすべてがうまくいった

10
Van_Paitin

私は私のインポートにタイプミスがあったときに私はこれを得ました：

import {Comonent} from 'react';
6
Matthew Herbst

あなたが実際に拡張しているクラスをチェックし、いくつかのReactメソッドが非推奨になりました。それはまた、'React.Components'ではなく'React.Component'というタイプミスエラーかもしれません。

がんばろう！！

5
Ignatius Andrew

私は別の可能な解決策、私のために働いたものに貢献するつもりです。私はコンビニエンスインデックスを使ってすべてのコンポーネントを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 {        
}
4
Chris

これは私のために働いた：

import React, {Component} from 'react';
4
Armen

私は同じ問題を抱えています、Navigatorから{Navigator}に変更するだけです。

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

これを引き起こすサードパーティのパッケージがあるかもしれません。私たちの場合は react-dazzle でした。 @steineと似た設定があります（ 上記の回答を参照してください ）。

問題のあるパッケージを見つけるために、私はwebpackビルドをプロダクションモードでローカルに走らせました、そしてそれ故スタックトレースの中で問題のあるパッケージを見つけることができました。だから私たちのために これ 解決策を提供し、私は醜化を続けることができました。

2
Erez Cohen

私は書いた

React.component

React.Componentの代わりにそれが私の問題でした））そして30分以上これを探していました。

2
Руслан

TerserPluginによる醜化を伴うWebpack 4チャンクおよびハッシュ

これは、WebpackがTerserPlugin（現在のバージョン1.2.3）を介して、チャンクとハッシュを使用して縮小と非分割を行う場合に発生する可能性があります。私の場合、エラーは私のvendors.[contenthash].jsを保持している私のnode_modulesバンドルのTerserプラグインによる醜化に絞り込まれました。ハッシュを使わないときはすべてうまくいきました。

解決策は、アグリゲーションオプションでバンドルを除外することでした。

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

詳細情報

2
steine

この答えには正しくありませんが、同じエラーを持つ他の人にとっては私のばかげて愚かな間違いが潜在的に助けることができるでしょう。

愚かにも、私の問題は クラス名の後に（）を含めることによって関数表記を使用することでした 。

構文が正しいことを確認してください。そして、あなたは正しい名前とパスでどんな外部のコンポーネント/モジュールでもインポートして、エクスポートしました。

最新バージョンのreactがインストールされている場合、このテンプレートは問題なく機能します。

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass
2
Harry

私の場合は、export default class yourComponent extends React.Component() {}をexport default class yourComponent extends React.Component {}に変更してこのエラーを修正しました。はい括弧を削除してください()はエラーを修正しました。

1
Jeff Tian

インポートまたはクラス生成にタイプミスがあるかどうかを確認してください。それは単純なことかもしれません。

1
HoCo_

import React from 'react-domをimport React, {Component} from 'react'に変更
そしてclass Classname extends React.Componentをclass Classname extends Componentに変更してください
最新版の React（現在の16.8.6）を使用している場合 。

1
neer17

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

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

次のようなコンポーネントをインポート中にこのエラーが発生しました。

import React, { Components } from 'react';

の代わりに

import React, { Component } from 'react';
1
Ashvini Maurya

これが一つの答えです。

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

私の場合、私は使っていました：

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

1
Kush Gautam

あなたが開発者監視モードを実行している場合は、停止して再構築してください。私はES6モジュールをReact Componentに変換しました、そしてそれは再構築の後にだけ動作しました（vs build）。

0
Scott Leonard

私がこれを使用したときにも私に起こった：

class App extends React.Component(){

}

正しいものの代わりに：

class App extends React.Component{

}

通知： - （）この問題の主な原因である最初のもので

0
sumit

私の場合は、このエラーを修正するのはReact.ElementからReact.Componentに変更したことです。

0
SkorpEN

私の場合は、ピア依存関係を持つnpmモジュールを使用していました。このエラーは、モジュールのwebpack設定内の間違った 'external'設定が原因でした。

  externals: {
    react: 'react',
    react: 'prop-types',
  },

そのはず：

externals: {
    react: 'react',
    ['prop-types']: 'prop-types',
  },
0
David Lin

TypepoでExpo/react-nativeを使用した場合のもう1つの発生：パッケージングの途中でTypeScriptファイルを再コンパイルすると、reactパッケージャが失われることがあります。

アプリを再度実行する唯一の方法は、キャッシュをクリアすることです。あなたが博覧会のcliを使用しているなら、あなたはRを押すことができます（それは大文字の 'R'です）。これでバンドル全体が再構築されます。時には開発モードに切り替えることも役に立ちます....

0
andri

react-nativeを使っている人のために：

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

このエラーが発生する可能性があります。

reactを直接参照するのがより安定した方法です。

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

私にとってはdefaultを忘れていました。だから私はexport class MyComponentの代わりにexport default class MyComponentを書きました

0
Nick Manning

私のreactとreact-domのバージョンがマージ後に一致しなかったので、私はこの問題を抱えていました。

手動で欲しいバージョン番号を入力してnpm installを再実行することで修正しました。

0
Rose

私の場合、React <15.3.0にはReact.PureComponentが含まれていません。だからコードのように：

class MyClass extends React.PureComponent {
    //...
}

うまくいかないでしょう。

0
Ruben Martinez Jr.

コード内でrequireの代わりにimportを使用していた場合も同様です。

0
bhagyas

（Gruntタスクのように）このエラーが表示され、 Browserify および browserify-shim を使用している場合は、意図せずにbrowserify-shimにReactを処理するように言われたグローバルネームスペースの一部（たとえば、CDNからロードされたもの）。

BrowserifyにReactを別のファイルではなく、変換の一部として含める場合は、"react": "global:React"行が"browserify-shim"ファイルのpackages.jsonセクションに表示されないようにします。

0
Lachlan McD.