How to share code between node and react? - node.js

Question

I use React on server rendering, so the react code need to be used both in node and client, on client side I use browserify.
now suppose I have a component:
var item = React.createClass({
//code here
})
in order to use this component in node I have to require React first, so the component will be
var React = require('React');
var item = React.createClass({
//code here
})
but if I use this component in client via browserify, the React librray will be required, in this case my build js file will be too big. I know I can ignore React in browserify like
browserify -i React
but if I ignore the React then the code:
var React = require('React');
will cause an error "undefined is not a function"
any idea how to avoid this?

Answer 1

You can put your vendor packages in a separate bundle:
browserify -r react -r underscore > vendor.js
And then declare that those dependencies will be provided by an external bundle (or multiple):
browserify -x react -x underscore main.js > bundle.js
And include both in your page:
<script src="vendor.js"></script>
<script src="bundle.js"></script>
You don't need to rebuild the vendor bundle(s) when you build your main bundle (unless you've upgraded dependencies). Usually you don't actually need to do this, and if you're concerned about build times in development: watchify is a a good replacement/addition.
When something is -r'd you can also require it in a plain script tag. This means that there's now a require global, which may clash with other scripts on the page.
<script>
var React = require('react');
</script>

Answer 2

If you're already including React via a separate <script> tag, use the browserify-shim transform to rewrite your require('react') call to use the global React variable.
Add the following config to your package.json:
"browserify-shim": {
"react": "global:React"
}
Use the transform when bundling:
browserify -t browserify-shim lib/index.js -o build/index.js
The bundled version should look something like this:
var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
Alternatively, you can omit the need for the -t browserify-shim argument by adding some browserify transform config to your package.json
"browserify": {
"transform": [ "browserify-shim" ]
}