6

I am trying to use components from http://react-components.com (eg. react-youtube) in Reagent based application, but probably my naive approach is not the right one. I tried to install NPM packages with lein-npm module, include script in html page and use them via reagent/adapt-react-class as in this SO question. But for except this sample I wasn't successful.

Usually I get errors like "require/import/module is not defined" or "Youtube is undefined" (by having (def yt-test [] (r/adapt-react-class js/Youtube)). I am confused about what is needed to do. I read something about webpack/browserify, saw cljsjs packages - are those required in order to make this working?

2

2 Answers 2

9

I wrote a step by step guide on how to achieve this with webpack: blob.tomerweller.com/reagent-import-react-components-from-npm

The general concept is the same as @scttnlsn suggested: bundle all npm packages in an external JS file and expose them through the global window object.

3
  • Thanks for this guide. I'm trying to adapt it for npmjs.com/package/react-mathjax but don't know what to put in the view part as hiccup code? Do you have an idea?
    – Gra
    Commented Jul 17, 2017 at 16:10
  • Answering my own question: [:> ctx [:> node "2+2"]]
    – Gra
    Commented Jul 17, 2017 at 19:55
  • I have another problem for which you could have a solution: stackoverflow.com/questions/45201315/…
    – Gra
    Commented Jul 19, 2017 at 21:27
3

Those components are packaged as CommonJS modules. One approach for accessing CommonJS modules from ClojureScript is to bundle them into a single JavaScript file that can be included with your ClojureScript build.

You'll need to create a JavaScript entry point file which requires your various NPM dependencies and exposes them to ClojureScript (for example, by setting them on window). Create a file (let's call it index.js) containing:

window.YouTube = require('react-youtube');

Then use a tool like Browserify to bundle your entry point file and all of the dependencies it requires:

npm install -g browserify
browserify index.js --standalone window > bundle.js

Include bundle.js in your ClojureScript build and you'll be able to access the React component from ClojureScript via js/YouTube

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.