The site I’m working on uses React for most of its UI. We experienced a strange problem: if the build was done Linux (or OSX for that matter), when the user clicked on one of their tasks the task wasn’t displayed. Investigation found a JavaScript TypeError “inst.render is not a function” in the browser’s console. However if the build was done on Windows then clicking on a task worked fine. To make it even more puzzling, the site was running on a Linux server.

The build process for the UI deals with React, ES6, JavaScript, gulp, webpack, and babel. But the root cause was not any of these – instead, it was that webpack was configured to use the minor component bundle-loader.
Bundle-loader’s purpose is to split the transpiled and assembled JavaScript into smaller files. In this case it was creating two separate files:

dist/scripts/app.js
dist/0.scripts/app.js

On Windows for some reason this didn’t happen – the build would only produce dist/scripts/app.js.

Now, in order to use the dist/0.scripts/app.js file, you would need some JavaScript to load from that file. We didn’t have any. So the silent failure of the build on Windows compensated for the missing code to load from dist/0.scripts/app.js and it all worked fine. But when we built on a *nix operating system bundle-loader worked correctly, exposing the lack of the loader code. The code for some components was not loaded because it was in the second app.js, which is why there wasn’t a render function.

In case you’re wondering, my initial fix was just to remove the use of bundle-loader. Subdividing the JavaScript for all builds will have to wait for another day.