How to use use React libraries in ClojureScript

I'm trying to use cljsjs/vis in my re-frame / reagent / leiningen project, but getting the error when import this library into namespace.

cljsjs/vis in namespace required but not available

Have tried to use another libraries for charts/data visualizations, but still have same result. It seems something wrong with import JS libraries to clojurescript project.

leiningen project.cljs file

(defproject test1 "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.10.1"]
                 [org.clojure/clojurescript "1.10.764"
                  :exclusions [com.google.javascript/closure-compiler-unshaded
                               org.clojure/google-closure-library
                               org.clojure/google-closure-library-third-party]]
                 [thheller/shadow-cljs "2.9.3"]
                 [reagent "0.10.0"]
                 [re-frame "0.12.0"]
                 [cljs-ajax "0.7.5"]
                 [cljsjs/vis "4.21.0-1"]]

  :plugins [[lein-shadow "0.2.0"]

            [lein-shell "0.5.0"]]

  :min-lein-version "2.9.0"

  :source-paths ["src/clj" "src/cljs"]

  :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]


  :shell {:commands {"open" {:windows ["cmd" "/c" "start"]
                             :macosx  "open"
                             :linux   "xdg-open"}}}

  :shadow-cljs {:nrepl {:port 8777}

                :builds {:app {:target :browser
                               :output-dir "resources/public/js/compiled"
                               :asset-path "/js/compiled"
                               :modules {:app {:init-fn test1.core/init
                                               :preloads [devtools.preload]}}

                               :devtools {:http-root "resources/public"
                                          :http-port 8280
                                          }}}}

  :aliases {"dev"          ["with-profile" "dev" "do"
                            ["shadow" "watch" "app"]]
            "prod"         ["with-profile" "prod" "do"
                            ["shadow" "release" "app"]]
            "build-report" ["with-profile" "prod" "do"
                            ["shadow" "run" "shadow.cljs.build-report" "app" "target/build-report.html"]
                            ["shell" "open" "target/build-report.html"]]
            "karma"        ["with-profile" "prod" "do"
                            ["shadow" "compile" "karma-test"]
                            ["shell" "karma" "start" "--single-run" "--reporters" "junit,dots"]]}

  :profiles
  {:dev
   {:dependencies [[binaryage/devtools "1.0.0"]]
    :source-paths ["dev"]}

   :prod {}

}

  :prep-tasks [])

cljs file

(ns my-project
  (:require [cljsjs.vis]))

Solution

shadow-cljs does not support CLJSJS packages. Instead you install the original npm packages those CLJSJS packages represent and use that directly.

So instead of

(ns my-project
  (:require [cljsjs.vis]))

;; accessing vis via js/WhateverGlobalItUses

you do

(ns my-project
  (:require ["vis-network" :as vis]))

;; then use "vis" directly

The npm version is split into multiple separate packages, so just include whatever you want to use.

The shadow-cljs docs explain using npm packages is much more detail. There is also an older example repo using vis-network.