React + Webpack: React.createElement: Typ sollte nicht null, undefined, boolean oder Nummer sein

Warum bekomme ich diesen Fehler in der Konsole des Chroms?React + Webpack: React.createElement: Typ sollte nicht null, undefined, boolean oder Nummer sein

Mein Code:

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'] 
     } 
     } 
    ] 
    } 
}

Quelle

2017-02-21 xRobot

Warum haben Sie zwei Einstiegspunkte? Warum benutzen Sie 'module.exports' von einem Ort und' importieren' von einem anderen? Solltest du nicht einfach 'export var SalutaMondo = ...' verwenden? –

In Ihrer Webpack-Konfiguration verwenden Sie die babel-loader. Dies bedeutet, dass Sie Module im ES6-Stil verwenden. In salutamondo.js verwenden Sie CommonJS-Stilmodule. Daher nimmt das babel-loader das Modul nicht ab. Können Sie versuchen:

export default SalutaMondo;

statt:

module.export = SalutaMondo;

Quelle

2017-02-21 13:15:42 pieceOpiland

Also sollte ich React.Component statt React.createClass auch erweitern? – xRobot

Sie können beides tun, es hängt davon ab, welche Art von Stil Sie bevorzugen, ich verwende in der Regel React.createClass, da es keinen zusätzlichen Bloat von babel zieht. Aus der Dokumentation: "Wenn Sie ES6 noch nicht verwenden, können Sie stattdessen den Helper React.createClass verwenden." https://facebook.github.io/react/docs/react-component.html – pieceOpiland

@xRobot Diese Seite enthält weitere Informationen zu den Unterschieden zwischen der Verwendung von Reagieren mit und ohne ES6: https://facebook.github.io/react/ docs/react-without-es6.html – pieceOpiland

Dies aufgrund salutamondo.js mit Commonjs Modulformat wahrscheinlich ist, während main.js ist ECMAScript-Modul. Ich empfehle, alles in ECMAScript-Modulen zu halten:

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

     } 


    }); 

export default SalutaMondo;

Quelle

2017-02-21 13:16:37 Pavlo

Also sollte ich React.Component erweitern anstatt React.createClass zu verwenden? – xRobot

@xRobot ja, vorzugsweise. 'createClass' wird in [Reagate 15.5] (https://github.com/facebook/react/issues/8854) [veraltet] sein. – Pavlo

React + Webpack: React.createElement: Typ sollte nicht null, undefined, boolean oder Nummer sein

Antwort

Verwandte Themen