GHCJS: How to use a JS library that is intended to be used with npm

Question

I'm using ghcjs-0.2.0.9006030_ghc-7.10.3 with stack lts-6.30 to build a frontend app. Inspired by this post, I decided to use react-flux and material-ui. I added React's CDN link to my index.html, and configured GHCJSi to use a custom index-dev.html when working with the repl.(React's CDN link is also included in index-dev.html)

However, with material-ui-next, the official installation method is to use NPM. They provide no CDN link. So how to use this library in a GHCJS project? I think one of the following should work:

• Use the CDN link provided by jsDelivr. (Though this link doesn't work)
• Find some way to bundle material-ui-next and put it in js-sources field in cabal, so that it can be linked with our app at build time.

Any help is appreciated.

Answer 1

In the package.json of material-ui, scripts build:umd:prod and build:umd:dev can be used to build UMD bundles of the package. So you can use the CDN link provided by unpkg.

Even though material-ui doesn't declare a peer dependency on react-transition-group, it expects react-transition-group/TransitionGroup to be present. So we have to add the following code before the link to material-ui

<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/dist/react-transition-group.js"></script>
<script>
    window["react-transition-group/TransitionGroup"] = ReactTransitionGroup.TransitionGroup;
</script>

I created a issue on material-ui's github repository, see that issue for more details.