Question

刚刚将我的应用程序从ES5更新到ES6。在这样做之后，我发现了这一警告：

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

我认为这与我的加载顺序有关，但我似乎无法找到确切的位置。将HeaderContainer转换为es6语法

后发生错误

entry.js

require('babel-polyfill');
require('expose?React!react');
require('expose?ReactDOM!react-dom');
require('expose?$!expose?jQuery!jquery');

require('expose?HeaderContainer!./header/HeaderContainer.jsx');

HeaderContainer.jsx

import React from 'react';

export class HeaderContainer extends React.Component {
  render() {

    return (
      <nav id="header" className="navbar navbar-default navbar-fixed-top">
        <div className="container-fluid">
          This should work
        </div>
      </nav>
    );
  }
}

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>App Name here</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'bundle' %>
</head>
  <body>
    <div id="react-header-container"></div>

    <script>
      var headerContainer = React.createElement(HeaderContainer);

      ReactDOM.render(headerContainer, document.getElementById('react-header-container'));
    </script>
  </body>
</html>

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: './app/frontend/javascripts/entry.js',

  output: {
    path: path.join(__dirname, 'app', 'assets', 'javascripts'),
    filename: 'bundle.js',
    publicPath: '/assets',
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [ 'node_modules'],
  },

  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

new webpack.ProvidePlugin({
  React: 'react',
  ReactDOM: 'react-dom',
});

的package.json

{
  "name": "app-name-here",
  "private": true,
  "scripts": {
    "dev": "webpack --progress --colors --watch"
  },
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "exports-loader": "^0.6.2",
    "expose-loader": "^0.7.1",
    "imports-loader": "^0.6.5",
    "jsx-loader": "^0.13.2",
    "webpack": "^1.12.11"
  },
  "engines": {
    "node": ">= 0.10"
  },
  "dependencies": {
    "classnames": "^2.2.1",
    "jquery": "^2.2.0",
    "jquery-mask-plugin": "^1.13.4",
    "lodash": "^3.10.1",
    "material-ui": "^0.14.4",
    "moment": "^2.13.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-tap-event-plugin": "^0.2.1"
  }
}

Answer 1

您导出的组件不正确。目前没有默认导出，因此当您需要该文件时，您实际上并未导入该组件。

export default class HeaderContainer extends React.Component {
    render() {

    return (
      <nav id="header" className="navbar navbar-default navbar-fixed-top">
        <div className="container-fluid">
          This should work
        </div>
      </nav>
    );
  }
}

Answer 2

.babelrc文件中有什么内容？这是一个例子.babelrc。此文件用于配置babel，您必须自己创建：

{
  "presets":["react", "es2015"]
}

它应放在您的应用程序根目录中。

修改

尝试此操作，将babel-loader替换为babel

loaders: [
      {
        test: /\.jsx$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]

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

2 个答案: