web-dev-qa-db-ja.com

React.createElement：型が無効です-文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、次のようになります：オブジェクト

期待される

Appコンポーネントファイルをエクスポートし、index.jsにインポートできるはずです。

結果

次のエラーが表示されます

React.createElement：型が無効です-文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、次のようになります：オブジェクト

私のindex.js

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./components/App');
require('./index.css');

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

それから私のコンポーネント/App.jsで

const React = require('react');

export default class App extends React.Component {
    render() {
        return (
            <div>
                Hell World! Wasabi Sauce!
            </div>
        );
    }
}

// module.exports = App;

コメントを外す場合module.exports = App;それは動作しますが、エクスポート構文を使用しようとしています。私を夢中にさせているのは、私がここでまったく同じことをしている別のプロジェクトであり、それはうまく機能しています:(

javascriptreactjsecmascript-6exportcommonjs
11
Leon Gaban

発生した問題は、2つの異なるモジュールシステムが混在しているために発生しました。これらのシステムは 解決および実装 です。 CommonJSモジュール は動的であり、それに反して ES6モジュール は静的に分析可能です。

Babel などのツールは、ESXモジュールをCommonJSにトランスパイルします。これは ネイティブサポートがまだ準備できていないため であるためです。しかし、微妙な違いがあります。 default export（_exports default_） を使用することで、ES6モジュールと並んで名前付きおよびデフォルトのエクスポートが可能なため、トランスパイラーは_{ default }_プロパティを持つCommonJSモジュールを出力しました。次の例は、完全に有効なES6モジュールです。

_export default class Test1 { }
export class Test2 { }
_

これにより、トランスコンパイル後に_{ default, Test2 }_ CommonJSモジュールが生成され、requireを使用すると、そのオブジェクトが戻り値として取得されます。

CommonJSでES6モジュールのデフォルトのエクスポートをインポートするには、上記の理由によりrequire(module).default構文を使用する必要があります。

React.createElementのデバッグ：type is invalidエラー

このエラーは、インポートされたモジュールに問題があるときにReact=がコンポーネントをレンダリングしようとする場合に非常に一般的です。ほとんどの場合、これはモジュールまたは問題のexportパスを使用すると（相対パスはなんらかの冗談です）、適切なツールを使用しないと、深刻な髪の毛引きが発生する可能性があります。

この場合、Reactは汎用オブジェクト_{__esModule: true, default: function}_をレンダリングできず、単にエラーをスローしました。requireを使用する場合、表示するために必要なモジュールを印刷する可能性があります。問題のデバッグに役立つ内容です。

副次的な注意として、本当に必要な場合を除き、CommonJSモジュールとES6モジュールを混在させないでください。 import/export構文はES6モジュール用に予約されています。 CommonJSモジュールを使用する場合は、_module.exports_を使用し、requireを使用してそれらをインポートします。将来、ほとんどの開発者は標準モジュール形式を使用するようになります。それまでは、それらを一緒に混ぜるときに注意してください。

12
Przemysław Zalewski

頻繁に..

...次のように簡単です：

const MyModule = require('./MyModule');

対

const {MyModule} = require('./MyModule');
6
Mick

私は同じ問題に直面していた、私はこのトリックをし、私のために働いた、

class Appの前にexportを置くだけです。

export class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

使用しているルーターを確認することもできます。私はこの作品を私のために使いました、

npm install react-router-dom@next --save
0
Ashish Kamble

ES6モジュールは紛らわしいです。それらをNodeJS commonJSモジュールパターンと混ぜると、もっと混乱します;）、

フロントエンドコードで作業している場合は、単一のスタイル、できればES6モジュールを使用することをお勧めします。理解を深めるために、サンプルアプリを1つ作成しました。

https://github.com/Sutikshan/es-bits/tree/master/modules

0
Sutikshan Dubey