CODEWITHSUNDEEP
javascriptreactjsclojurescriptreagentreact-dnd
S4beR
S4beR

Reputation: 1847

include foreign libs in clojurescript project

I am trying to use react-beautiful-dnd in my new ClojureScript and Reagent application. As per the blog here, it says that I need to include the file using :foreign-libs in my project.clj file.

I have configured it as below

  :cljsbuild
  {:builds {:min
            {:source-paths ["src/cljs" "src/cljc" "env/prod/cljs"]
             :compiler
             {:output-to        "target/cljsbuild/public/js/app.js"
              :output-dir       "target/cljsbuild/public/js"
              :source-map       "target/cljsbuild/public/js/app.js.map"
              :optimizations :advanced
              :foreign-libs [{:file "src/cljs/react-beautiful-dnd/react-beautiful-dnd.js"}]
              :pretty-print  false}}
            :app
            {:source-paths ["src/cljs" "src/cljc" "env/dev/cljs"]
             :figwheel {:on-jsload "toka.core/mount-root"}
             :compiler
             {:main "toka.dev"
              :asset-path "/js/out"
              :output-to "target/cljsbuild/public/js/app.js"
              :output-dir "target/cljsbuild/public/js/out"
              :source-map true
              :optimizations :none
              :pretty-print  true}}



            }
   }

I got the compiled file from here which I have copied in my project. Though after all these changes I am still not able to use DragDropContext or Droppable in my component.

In my component I have declared them as below

(def DragDropContext (reagent/adapt-react-class js/DragDropContext))
(def Droppable (reagent/adapt-react-class js/Droppable))

Can anyone please help me understand what I am doing wrong here? I am getting error as below

Uncaught ReferenceError: DragDropContext is not defined
    at core.cljs?rel=1508832729388:11
(anonymous) @ core.cljs?rel=1508832729388:11

Note: I haven't added any provide attribute in foreign-libs as I am not sure of package. Also I am not sure if I need to do some :require in my core.cljs component file.

Upvotes: 4

Views: 1055

Answers (2)

YahyaThorsten
YahyaThorsten

Reputation: 21

I was struggeling with the same problem and found the solution. The components were put in a separate namespace and thus have to be referenced like this:

(def DragDropContext (reagent/adapt-react-class js/ReactBeautifulDnd.DragDropContext))
(def Droppable (reagent/adapt-react-class js/ReactBeautifulDnd.Draggable))

Upvotes: 2

Piotrek Bzdyl
Piotrek Bzdyl

Reputation: 13185

You need to add :provides (you can choose whatever ns name you'd like, e.g. react-beautiful-dnd) and then require it so it is loaded. As it depends on React, you should specify it in requires (e.g. cljsjs.react if you included React as CLJSJS dependency):

[{:file "src/cljs/react-beautiful-dnd/react-beautiful-dnd.js"
  :provides ["react-beautiful-dnd"]
  :requires ["cljsjs.react"]}]

And in your namespace:

(ns my.ns
  (:require
    [cljsjs.react]
    [react-beautiful-dnd]))

Upvotes: 1

Related Questions