NPM Package fails to compile in Clojurescript

Question

I am trying to use uber/react-map-gl with Clojurescript. I have added it the project.clj-

:npm-deps {"@cljs-oss/module-deps" "^1.1.1"
           :react-map-gl "^3.3.0-alpha.5"
           :react "^16.4.1"}

and npm installed it separately. When I require it from my ns -

(:require [react-map-gl :as M 
                        :refer [BaseControl TRANSITION_EVENTS 
                                FlyToInterpolator]])

(js/console.log M)
(js/console.log BaseControl)
(js/console.log M/BaseControl) ;;-> also fails

M is correctly logged to the console, but drilling into the attributes (such as BaseControl) throws an Exception -

Exception: ReferenceError: 
...$node_modules$react_map_gl$dist$esm$components$base_control is not defined at Object.get BaseControl [as BaseControl] (http://localhost:3449/js/compiled/out/node_modules/react-map-gl/dist/esm/index.js:5:19) at Object.remoteFunction (<anonymous>:2:14)]

A handful of the attributes are accessible (e.g. no exceptions), such as TRANSITION_EVENTS and FlyToInterpolator.

I see this bug (which may or may not be relevant), but I am not sure how to proceed or even troubleshoot. Here's a minimal failing example to repro. Any help would be appreciated.

Answer 1

This is not an answer (really just a comment).

I was able to ostensibly get farther by first manually requiring all of the components and overlays (which points to some deps mismanagement of some sort).

$ clj -m cljs.main -co compile-opts.edn -r
ClojureScript 1.10.339
cljs.user=> (require '"react-map-gl/dist/esm/components/popup"
 '"react-map-gl/dist/esm/components/navigation-control"
 '"react-map-gl/dist/esm/components/interactive-map"
 '"react-map-gl/dist/esm/components/base-control"
 '"react-map-gl/dist/esm/components/static-map"
 '"react-map-gl/dist/esm/components/marker"
 '"react-map-gl/dist/esm/overlays/svg-overlay"
 '"react-map-gl/dist/esm/overlays/html-overlay"
 '"react-map-gl/dist/esm/overlays/canvas-overlay"
 '[react-map-gl :as M
                        :refer [BaseControl TRANSITION_EVENTS
                                FlyToInterpolator]])

cljs.user=> M
#js {:default nil, :InteractiveMap nil, :StaticMap nil, :BaseControl nil, :Marker nil, :Popup nil, :NavigationControl nil, :CanvasOverlay nil, :HTMLOverlay nil, :SVGOverlay nil, :TRANSITION_EVENTS #js {:BREAK 1, :SNAP_TO_END 2, :IGNORE 3}, :TransitionInterpolator #object[TransitionInterpolator], :LinearInterpolator #object[LinearInterpolator], :FlyToInterpolator #object[ViewportFlyToInterpolator], :experimental #js {:MapControls #object[MapControls]}}

You can see that, while this avoids the ...$node_modules$react_map_gl$dist$esm$components$base_control is not defined error, it is not really a solution as things like :BaseControl end up being nil.

You can get a sense of the dependencies at play by making a revision to the compiler to log the results of calls to cljs.closure/index-node-modules.

My deps.edn:

{:deps {org.clojure/clojurescript {:mvn/version "1.10.339"}}}

and compile-opts.edn:

{:npm-deps {:react-map-gl "^3.3.0-alpha.5"
            :react "^16.4.1"}
 :install-deps true
 :output-dir "out"}