React.createElement：类型不应该为null，undefined，布尔值或数字

刚刚将我的应用程序从ES5更新到ES6。这样做后，我遇到了这个反应的警告：React.createElement：类型不应该为null，undefined，布尔值或数字

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" 
    } 
}

来源

2016-07-04 theStig

你没有正确地导出组件。目前没有默认导出，所以当您需要文件时，您并不是真正导入组件本身。

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> 
    ); 
    } 
}

来源

2016-07-04 22:25:56 evkline

我已经试过这种替代babel-loader，只是它重试。不幸的是，这不起作用 – theStig

如果您在创建HeaderContainer元素之前向脚本标记添加调试器语句并将HeaderContainer的值记录到控制台，您会看到什么？ – evkline

var headerContainer = React ...没有错误。运行该行后，我收到错误。在控制台中调用HeaderContainer将返回：HeaderContainer：Object {__esModule：true} – theStig

你的.babelrc文件是什么？这里是一个例子.babelrc。此文件用于配置babel，您必须自己创建它：

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

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

编辑

试试这个，有babel

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

来源

2016-07-05 02:40:46 matthewalexander

当你在webpack.config.js中指定预设时，你为什么需要.babelrc – theStig

你不应该需要它（.babelrc就是）......但是你正在使用新的ES6语法时遇到意外的行为。所以，这似乎是一个逻辑故障排除步骤，尝试添加默认配置文件的babel（如果不需要，webpack将忽略它）。如果它与.babelrc文件一起工作，并且没有它，它就无法工作 - 您知道webpack.config存在问题。 – matthewalexander

看到我的编辑 - 你可以尝试的另一件事。 – matthewalexander

React.createElement：类型不应该为null，undefined，布尔值或数字

回答

相关问题