使用React Component时元素类型无效

Question

我似乎遇到了一个问题Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.。无法弄清楚为什么会发生以下代码。

在client.js，

'use strict';

import DefaultLayout from 'custom_module/lib/bundle';
import transService from './transservice';
const translator = transService.createTranslator(CLI_CONTEXT);

ReactDOM.render(
  <div>
      // Seems to be where the error occurs
      <DefaultLayout translator={translator} title={'app.title'}/>
  </div>,
  document.getElementById('react-container')
);

在DefaultLayout.jsx，

'use strict';

import 'uikit';

import React from 'react';
import Layout from './common_components/layout.jsx';

class DefaultLayout extends React.Component {

    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
        document.title = this.props.translator(this.props.title);
    }

    componentDidMount() {
        document.title = this.props.translator(this.props.title);
    }

    render() {
        return (
            <div>
                <Layout translator={this.props.translator}>
                    <div>{this.props.children}</div>
                </Layout>
            </div>
        );
    }
}

export default DefaultLayout;

我使用以下配置将DefaultLayout.jsx打包到custom_module Webpack和Gulp，

module.exports = function(paths) {

    var webpack = require('webpack'),
        ManifestPlugin = require('webpack-manifest-plugin'),
        env = require('./gulpenv'),
        externals = [],
        plugins = [];

    const vendorPackages = [
        'jquery',
        'uikit'
    ];

    plugins.push(new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env.IS_DEV)
    }));

    plugins.push(new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity));

    plugins.push(new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        jquery: 'jquery',
        "window.jQuery": "jquery"
    }));

    var webpackConfig = {
        name: 'Build Client Side',
        entry: {
            bundle: './src/client/javascripts/DefaultLayout.jsx',
            vendor: vendorPackages
        },
        bail: true,
        output: {
            filename: '[name].js'
        },
        module: {
            loaders: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react', 'stage-0']
                }
            }, {
                test: /\.(scss|sass)$/,
                loader: 'style!css!sass'
            }, {
                test: /uikit\/dist\/js\//,
                loader: 'imports?jQuery=jquery,$=jquery,this=>window'
            }]
        },
        resolve: {
            modulesDirectories: ['node_modules'],
            extensions: ['', '.js', '.jsx']
        },
        plugins: plugins
    }

    return webpackConfig;
};

My Jade模板看起来像，

doctype html
html
    head
        link(rel="stylesheet", type="text/css", href="/stylesheets/bundle.css")
        link(rel="stylesheet", type="text/css", href="/stylesheets/style.css")
    body
        block content
        script(type="text/javascript").
            var CLIENT_CONTEXT = {
                language: '#{language}',
                logging: '!{clientlogger}'
            };
        script(type="text/javascript", src="/javascripts/vendor.bundle.js")
        script(type="text/javascript", src="/javascripts/bundle.js")
        script(type="text/javascript", src="/javascripts/client.js")