CODEWITHSUNDEEP
javascriptreactjswebpackreact-dom
Himmel
Himmel

Reputation: 3709

Using Webpack to include React from CDN, but not ReactDOM

In my webpack build, I would like to load React from a CDN, but not ReactDOM, as it requires an extra roundtrip for a very small file.

My webpack configuration has the following block of code declaring "externals" so that it will not build these files (I instead include CDNs).

webpack.config.js

...

externals: {
    react: 'React'
},

...

The problem is that only including React in externals still builds React because ReactDOM depends on it.

node_modules/react-dom/index.js

module.exports = require('react/lib/ReactDOM');

Adding 'react-dom': 'ReactDOM' to externals effectively removes them both from the bundle, but I don't want to have to include the ReactDOM CDN...

How can I configure webpack to load React from a CDN, but include ReactDOM in my main bundle?

Note: I'm using webpack 2.1.0-beta17 and React 15.1.0.

Update I tried adding react/lib/ReactDOM to externals.

...

externals: {
    react: 'React',
    'react/lib/ReactDOM': 'commonjs react-dom'
},

...

But I get the following error.

require is not defined

Upvotes: 4

Views: 1966

Answers (1)

Ed Staub
Ed Staub

Reputation: 15690

[Not an answer, too big for comment]

See issues https://github.com/facebook/react/issues/5413, https://github.com/facebook/react/issues/6128, which argue for having a CDN bundle of React+ReactDom, which would float your boat, if I understand correctly. Dan Abramov feels it, so I'm hopeful. Note, however, his comment that ReactDOM will get a lot bigger soon.

Upvotes: 2

Related Questions