JavaScript Dependencies

Install react and react-dom:

npm install --save react react-dom

Now create src/hello_bundler/core.cljs with the following contents:

(ns hello-bundler.core (:require [react])) (.log js/console react/Component)

Notice that we are requiring React as if it was a normal require and a normal namespace.

In order for this to work we need to set a couple of compiler options. Create a build.edn file with the following:

{:main hello-bundler.core :output-to "out/index.js" :output-dir "out" :target :bundle :bundle-cmd {:none ["npx" "webpack" "out/index.js" "-o" "out/main.js" "--mode=development"] :default ["npx" "webpack" "out/index.js" "-o" "out/main.js"]} :closure-defines {cljs.core/*global* "window"}} ;; needed for advanced

Our build will generate out/index.js which is exactly the entry file that Webpack is looking for. We’ll write the bundler result back into the output directory.

Note the new :target :bundle option. This ensures that the generated code is compatible with popular JavaScript bundlers that can handle Node.js style require . It also sets a bunch of other sensible defaults like externs inference, so that advanced compilation will just work. :bundle-cmd is just an arbitrary shell command to run after the ClojureScript build completes. In the case of watching bundlers like Metro you probably won’t bother with :bundle-cmd .

Let’s see this in action, the following will build your project then start a REPL:

clj -m cljs.main -co build.edn -v -c -r

Your default browser will open http://localhost:9000. Open the Developer Console, you should see that React.Component got logged.

At the REPL you can require react and interact with it: