How to prepare react component as external package using webpack?

620 Views Asked by At

I have react component hosted on github, it is simple wrapper around <table> with few features. I use webpack to build my project. This is webpack config inherited after react-create-app:

module.exports = {
    bail: true,
    devtool: 'source-map',
    entry: {
        index: paths.appIndexJs
    },
    externals : {
        react: 'react'
    },
    output: {
        path: paths.appBuild,
        filename: 'index.js',
        publicPath: publicPath,
        library: "ReactSimpleTable",
        libraryTarget: "umd"
    },
    resolve: {
        fallback: paths.nodePaths,
        extensions: ['.js', '.json', '.jsx', '']
    },
    module: {
        preLoaders: [
            ... preloaders ...
        ],
        loaders: [
            ... loaders ...
        ]
    },
    plugins: [
        new webpack.DefinePlugin(env),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};

And now when I used my component in another project (as external package from github) I've got warnings related to that issue: https://facebook.github.io/react/warnings/dont-call-proptypes.html .

If I remove externals from webpack config everything works fine, but my output file is about 130kB (sic!). With externals in webpack config react is excluded from index.js and it weights about 35kB (non minified). But I got warnings :/

I wonder how to exclude react from build and mitigate warnings. I don't use PropTypes in any unusual way, so advices from https://facebook.github.io/react/warnings/dont-call-proptypes.html are not relevant.

I just want to let users import my component and assume, that they have react already in dependencies...

0

There are 0 best solutions below