React.createElement：typeはnull、未定義、ブール値、または数字であってはなりません

私のアプリケーションをES5からES6に更新しました。そうした後、私は反応するから、この警告に実行しているよ：React.createElement：typeはnull、未定義、ブール値、または数字であってはなりません

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

私は、これは私のロード順序に関係していると信じて、私は場所を正確に見つけることができないようです。エラーが構文を

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>

をES6する HeaderContainer変換後に発生しました

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

これはアプリケーションのルートディレクトリに配置する必要があります。

EDIT

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：typeはnull、未定義、ブール値、または数字であってはなりません

答えて

関連する問題