`无法在React Component npm模块中读取Component`

Question

我有一小组可重复使用的反应组件，我试图将它们捆绑到一个模块中。

然而，当我将它们包含在另一个产品中并尝试构建时，我得到Cannot read property 'Component' of undefined。
似乎没有_react.Component的引用，但_react确实存在。

使用以下配置将我的组件编译到/dist目录中：

var config = {
    entry: path.resolve('./src/index.jsx'),
    devtool: 'source-map',
    output: {
        path: path.resolve('./dist'),
        filename: 'react-components.js'
    },
    externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react',
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom',
        },
        'react-bootstrap': {
            root: 'ReactBootstrap',
            commonjs2: 'react-bootstrap',
            commonjs: 'react-bootstrap',
            amd: 'react-bootstrap',
        }
    },
    module: {
        loaders: [
            {
                test: /(\.jsx|\.js)$/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/
            }
        ]
    }
};

然后我使用import { Component1, Component2 } from 'react-components'将它们包含在我的其他项目中。

我在其中包含的项目的webpack配置与上面几乎相同，我列出了以下差异：

var config = {
    entry: path.resolve('./src/example.jsx'),
    devtool: 'source-map',
    output: {
        path: path.resolve('./src/'),
        filename: 'app.js',
        publicPath: 'http://localhost:8080/src',
    },
    devServer: {
        hot: true,
        inline: true,
        port: 8080,
        historyApiFallback: true,
    },
    externals: {
        'cheerio': 'window',
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': true,
    },
    module: {
        loaders: [
            {
                test: /(\.jsx|\.js)$/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/,
                presets: [
                    'airbnb'
                ]
            }
        ]
    }
};