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.

I have tried using the below, as suggested here Webpack and external libraries but this doesn't seem to work. I can see webpack has exported React but it still appears in the bundle.

externals: {   'react': 'React' } 

I was thinking it may be another dependency e.g. react-router importing react? Has anyone managed to do this?

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.