web-dev-qa-db-ja.com

React 0.14.2エラー-スーパー式はnullまたは関数である必要があります

0.13.2から0.14.2に更新した後、次のエラーが発生します。

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

これについては いくつか質問 がすでにあります。最も一般的なエラーは、React.componentのスペルミスです（大文字のCなし）。もう1つは、バージョンが0.13未満のES6クラスを使用しようとしています。

しかし、私はすでにReact 0.13.xでES6クラスを使用しており、どこでも大文字のCを使用しており、React.Componentをログに記録すると適切な結果が得られるようです（関数ReactComponent（...））

いくつか検索した後、私はこれら3つのテストケースを作成しました。そのうちの2つはまったく同じエラーをスローし（理由はわかりません）、1つはスローしません。クラスが発生する順序を示唆しているように見えますか？

テスト1（エラーをスローします）

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var BaseComponent = require('./BaseComponent');

class Test extends BaseComponent {
    render() { return <div>Test worked</div>; }
}
ReactDOM.render(<Test />, document.getElementById('test'));

//BaseComponent.jsx
var React = require('react');
console.log(React.Component); // <--- logs "function ReactComponent(...)" !!
export default class BaseComponent extends React.Component { }

TEST 2（BaseComponentをTest.jsxの下に置きますが、それでもエラーです）

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
class BaseComponent extends React.Component { }
ReactDOM.render(<Test />, document.getElementById('test'));

TEST 3（BaseComponentをテストクラス定義の上に置きます。エラーはありません！？）

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class BaseComponent extends React.Component { }
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
ReactDOM.render(<Test />, document.getElementById('test'));

これで実際の問題が解決するかどうかさえわかりません。しかし、これらのテストケースで何が起こっているのかを理解することは、私が解決策にたどり着くのに役立つかもしれません。

私はバンドルにコンパイルするためにbabelでwebpackを使用しています。

更新変更

export default class BaseComponent extends React.Component { }

に

class BaseComponent extends React.Component { }
module.exports = BaseComponent;

エラーも削除しました！つまり、今すぐリファクタリングするつもりですが、export default classが機能するはずなので、問題は解決しません。

javascriptreactjsecmascript-6webpackbabeljs
11
Flion

私は解決策を見つけました。これは、私も更新したbabelの変更によるものです。使用する場合：

_export default class BaseComponent
_

また、importの代わりにrequireを使用する必要があるため、次のようになります。

_import BaseComponent from './BaseComponent'
_

の代わりに

_var BaseComponent = require('./BaseComponent')
_

この正規表現を使用して、どこでもそれを置き換えました：replace：var ([\w-_]+?) = require\('([\w-_.\/]+?)'\); with：_import $1 from '$2';_

5
Flion

しばらく前に同様の問題が発生しました。node_modulesフォルダーを削除し、すべてを再インストールするとうまくいきました。試してみてください。

0
luanped