reactjshaskellnpmmaterial-designghcjs

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


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:

Any help is appreciated.


Solution

  • 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/react-transition-group@2.2.1/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.