React + Webpack：React.createElement：型がnull、未定義、ブール値、または数値であってはなりません

クロムのコンソールでエラーが発生するのはなぜですか？React + Webpack：React.createElement：型がnull、未定義、ブール値、または数値であってはなりません

マイコード：

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
<title>hello React</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
<body> 
<div id="root"> 
<!-- my app renders here --> 
</div> 

    <script src="../react-15.3.1/build/react.js"></script> 
    <script src="../react-15.3.1/build/react-dom.js"></script> 
    <script src="./dist/bundle.js"></script> 
</body> 
</html>

main.js

import SalutaMondo from './salutamondo'; 

var UnaProva = React.createClass({ 

    render: function(){ 
     return (
     <div> 
      <SalutaMondo/> 
      <div>Ciao Emiliano</div> 
     </div> 
    ); 
    }, 

}); 

ReactDOM.render(<UnaProva />, document.getElementById("root"));

salutamondo.js

var SalutaMondo = React.createClass({ 
     render: function(){ 
      return (
      <h1>Hello World</h1> 
     ); 

     } 


    }); 

module.export = SalutaMondo;

webpack.config.js

const webpack = require('webpack') 
const path = require('path') 

module.exports = { 
    entry: [ './src/salutamondo.js', './src/main.js' ], 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js?$/, 
     exclude: /node_modules/,   
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    } 
}

出典

2017-02-21 xRobot

なぜ2つのエントリポイントがありますか？なぜあなたは 'module.exports'をある場所から、' import'を他の場所から使っていますか？ 'export var SalutaMondo = ...'を使うべきではありませんか？ –

ウェブパックの設定では、babel-loaderを使用しています。これは、ES6スタイルのモジュールを使用していることを意味します。 salutamondo.jsでは、CommonJSスタイルのモジュールを使用しています。その結果、babel-loaderはモジュールをピックアップしていません。あなたは試すことができます：

export default SalutaMondo;

の代わり：

module.export = SalutaMondo;

出典

2017-02-21 13:15:42 pieceOpiland

React.createClassを使用するのではなく、React.Componentを拡張する必要がありますか？ – xRobot

あなたは好きなスタイルに依存していますが、React.createClassは通常、バベルから余分な鼓動を引き出しません。ドキュメントから： "ES6をまだ使用していない場合は、代わりにReact.createClassヘルパーを使用することができます。" https://facebook.github.io/react/docs/react-component.html – pieceOpiland

@xRobotこのページには、Reactを使用した場合と使用しない場合の違いについての詳細が掲載されています。https://facebook.github.io/react/ docs/react-without-es6.html – pieceOpiland

main.jsは、ECMAScriptのモジュールを使用している間これは、CommonJSモジュール形式を使用して原因salutamondo.jsに思われます。 ECMAScriptモジュールですべてを保持することをお勧めします。

var SalutaMondo = React.createClass({ 
     render: function(){ 
      return (
      <h1>Hello World</h1> 
     ); 

     } 


    }); 

export default SalutaMondo;

出典

2017-02-21 13:16:37 Pavlo

React.ComponentをReact.createClassを使用する代わりに拡張する必要がありますか？ – xRobot

@xRobotはい、できれば。 'createClass'は[React 15.5で非推奨]（https://github.com/facebook/react/issues/8854）になります。 – Pavlo

React + Webpack：React.createElement：型がnull、未定義、ブール値、または数値であってはなりません

答えて

関連する問題