CODEWITHSUNDEEP
reactjs
xRobot
xRobot

Reputation: 26567

React + Webpack: React.createElement: type should not be null, undefined, boolean, or number

Why am I getting that error in the console of the chrome ?

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

Upvotes: 0

Views: 248

Answers (2)

Pavlo
Pavlo

Reputation: 44889

This is likely due to salutamondo.js using CommonJS module format, while main.js is using ECMAScript module. I recommend keeping everything in ECMAScript modules:

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

       }


    });

export default SalutaMondo;

Upvotes: 1

pieceOpiland
pieceOpiland

Reputation: 359

In your webpack config, you're using the babel-loader. This implies that you're using ES6 style modules. In salutamondo.js, you're using CommonJS style modules. As a result, the babel-loader isn't picking up the module. Can you try:

export default SalutaMondo;

instead of:

module.export = SalutaMondo;

Upvotes: 1

Related Questions