Shimming dependencies of dependencies when working with Browserify

This post details as to why I wanted to implement Semantic-UI-React into our Revision.net project.

It was not however as simple as I would have liked as a result of our build process.

Such that heavy Javascript (that is regularly utilised across the site) can be cached (and served from a CDN) we build the libraries on which the site depends into a separate 'libraries' Javascript file.

Our Reactive components which depend on these libraries then utilise them. We achieve this by utilising browserify-shim within our build process.

Essentially when we require('React'), the browserify-shim transform tells browserify (executed as part of the build process) that React is defined on the window object.

When building an individual Reactive component, it does not need to include the React codebase within the built Javascript. Instead we tell browserify that it will be available globally. This makes on the fly builds significantly quicker, and makes the product much quicker (from a user experience point of view).

Usage of Semantic-UI-React is pretty straight forward. Unfortunately however I was encountering issues whereby Semantic-UI-React was not playing nicely with the build process - React was being built into the components output Javascript. As React was already included in the aforementioned 'libraries' Javascript this was causing issues as a result of the presence of multiple instances of React.

The problem was that the dependency of the project (Semantic-UI-React) also depends on React, yet was not utilising the shim configuration.

After a little research I stumbled upon this StackOverflow answer which outlines how simple it is to resolve this issue. It is simply the case of specifying the global option when calling browserify.

Now, it seems to be the case that you can not specify options from within your package.json file. It is however super simple to call the shim transform from your build script.

const bundler = browserify(file.path, {debug: true});

bundler.transform('browserify-shim', {global: true});

With this change I was able to build Semantic-UI-React into my project 'libraries' and utilise it within my React component classes. Awesome !