How do I exclude the "require('react')" from my Browserified bundle?

javascript reactjs browserify
André Pena picture André Pena · Mar 24, 2015 · Viewed 11.7k times · Source

I'm using Browserify to bundle a ReactJS application.

All my components include a require("react") at the top. This causes Browserify to include the ReactJS source in my bundle. But I'd like to exclude it.

How do I do that? Is this the right thing to do?

Answer

Brigand picture Brigand · Mar 24, 2015

@NickTomlin gave this answer, but then deleted it.

You can use external:

browserify --external react src.js > dest.js

An example using the api: 

var bundler = browserify('src.js');

bundler.external('react');
bundler.bundle();

This is a viable option. external requires another script to provide the module in a compatible way. You can produce such a script like this:

browserify -r react > react.js
env NODE_ENV=production browserify -r react | uglifyjs -m > react.min.js

And in HTML:

<script src="react.js"></script>
<script src="dest.js"></script>

dest.js is your code except react. react.js is just react and its dependencies.

Need more things external? Just add them in addition to react.

browserify -x react -x react-bootstrap src.js > dest.js
browserify -r react -r react-bootstrap > vendor.js

You could also do something like this in package.json

"browser": {"react": "./react-fake.js"}

// ./react-fake.js
try {
    module.exports = require('react');
} catch(e){
    module.exports = window.React;
}

And compile with -x react. This allows you to accept a -r react build, and fallback to a global React.

Related questions

Is there a way to render multiple React components in the React.render() function?

For example could I do: import React from 'react'; import PanelA from './panelA.jsx'; import PanelB from './panelB.jsx'; React.render( <PanelA /> <PanelB />, document.body ); where React would render: body PanelA PanelB Currently I'm …

Read More
Where should ReactDOM be imported from?

After upgrading to version 0.14.2, I see an error and recommendation to use ReactDOM.render() instead of React.render(), but whence do I import it? When I don't import it and just running as it is, it shows it as undefined. …

Read More
Receiving 'Error: Cannot find module' using browserify, gulp, react.js

So I've been playing around with React.js, gulp and browserify. Everything works great until I try to require a module in my main.js file. I am requiring components/modules in other files with no problem (see below), but …

Read More