Exclude react from webpack bundle

Question

I\'m trying to exclude react from my bundle which is generated by webpack. Reason being, we have a global version of react available on the page so I\'ll be using that.

Answer 1

I had the same problem as you did. Was stuck for one night, found the answer, react-dom requires react/lib/ReactDOM, which still includes react in the bundle. Solution looks like this:

externals: {
 'react': 'react', // Case matters here 
 'react-dom' : 'reactDOM' // Case matters here 
}

Then add react-dom to the script tag in your page.

Answer 2

You can just create multiple entries to separate react from your application bundle. You can for example do the following, using the webpack CommonsChunkPlugin :

module.exports = {
entry: {
    "app": "your app entry file",
    "react" : "react"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("react", "react.bundle.js")
   ]
}

Answer 3

webpack config:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter'
}

add these to the bottom of index.html body.

<script src="http://cdn.bootcss.com/react/15.4.1/react.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.1/react-dom.js"></script>
<script src="http://cdn.bootcss.com/react-router/2.8.1/ReactRouter.js"></script>

and, in your entry file, maybe index.js:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');

const App = () => {
    return <div>
        webpack externals
    </div>
};

ReactDOM.render(
    <App/>,
    document.getElementById('container')
);