CODEWITHSUNDEEP
reactjshaskellnpmmaterial-designghcjs
Steven Feng
Steven Feng

Reputation: 61

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.

Upvotes: 1

Views: 268

Answers (1)

Steven Feng
Steven Feng

Reputation: 61

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.

Upvotes: 0

Related Questions