[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。

質問

ReactJSを使用しています。

下のコードを実行すると、ブラウザはこう言います。

Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。

何が問題なのか、少しでもヒントがあればありがたいのですが。

まず、コンパイルに使用した行です。

var React = require('react');

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

そして、そのコード。

Uncaught TypeError: Super expression must either be null or a function, not undefined

UPDATE この問題で3日間地獄の炎に焼かれた後、私はreactの最新バージョンを使っていないことを発見しました。

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

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

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

sudo npm install -g [email protected]

ブラウザのバージョンも正しくしてください。

npm install [email protected]

これで誰かの3日間の貴重な命が救われることを祈っています。

解決するには？

クラス名

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

Reactのアップグレード

Reactはバージョン0.13.0以降、ES6スタイルのクラスのみをサポートしています（サポート導入に関する公式ブログポストを参照）。 こちら .

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

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

は、ES6 のキーワードを使おうとしていた ( class HelloMessage extends React.Component を使用して定義されていないクラスからサブクラス化することができます。 extends . で奇妙な動作に遭遇するのは、おそらくこれが原因です。 class の定義など。

そう、そうなんです。 TL;DR - React v0.13.xにアップデートしてください。

円形依存性

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