Question

为什么我在Chrome控制台中收到错误？

我的代码：

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

Answer 1

在您的webpack配置中，您使用的是babel-loader。这意味着您正在使用ES6样式模块。在salutamondo.js中，您使用的是CommonJS样式模块。结果，babel-loader没有拿起模块。你能尝试一下：

export default SalutaMondo;

而不是：

module.export = SalutaMondo;

Answer 2

这可能是由于salutamondo.js使用CommonJS模块格式，而main.js正在使用ECMAScript模块。我建议将所有内容保存在ECMAScript模块中：

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

       }


    });

export default SalutaMondo;

React + Webpack：React.createElement：type不应为null，undefined，boolean或number

2 个答案: