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，布爾值或數字

回答

相關問題