Breaks when running advanced compilation with dom/clipPath

[livtanong]

Stack trace:

dom.cljs:9 Uncaught TypeError: Cannot read property 'apply' of undefined
    at D0.E0.render (http://localhost:8080/main.js:1371:257)
    at p._renderValidatedComponentWithoutOwnerOrContext (http://localhost:8080/main.js:25:17508)
    at p._renderValidatedComponent (http://localhost:8080/main.js:25:17644)
    at performInitialMount (http://localhost:8080/main.js:25:13421)
    at p.mountComponent (http://localhost:8080/main.js:25:12467)
    at Object.mountComponent (http://localhost:8080/main.js:27:2892)
    at h.mountChildren (http://localhost:8080/main.js:26:26368)
    at h._createInitialChildren (http://localhost:8080/main.js:25:26619)
    at h.mountComponent (http://localhost:8080/main.js:25:24771)
    at Object.mountComponent (http://localhost:8080/main.js:27:2892)E0.render @ dom.cljs:9_renderValidatedComponentWithoutOwnerOrContext @ main.js:25_renderValidatedComponent @ main.js:25performInitialMount @ main.js:25mountComponent @ main.js:25mountComponent @ main.js:27mountChildren @ main.js:26_createInitialChildren @ main.js:25mountComponent @ main.js:25mountComponent @ main.js:27mountChildren @ main.js:26_createInitialChildren @ main.js:25mountComponent @ main.js:25mountComponent @ main.js:27performInitialMount @ main.js:25mountComponent @ main.js:25mountComponent @ main.js:27updateChildren @ main.js:25_reconcilerUpdateChildren @ main.js:26_updateChildren @ main.js:26updateChildren @ main.js:26_updateDOMChildren @ main.js:25updateComponent @ main.js:25receiveComponent @ main.js:25receiveComponent @ main.js:27updateChildren @ main.js:25_reconcilerUpdateChildren @ main.js:26_updateChildren @ main.js:26updateChildren @ main.js:26_updateDOMChildren @ main.js:25updateComponent @ main.js:25receiveComponent @ main.js:25receiveComponent @ main.js:27updateChildren @ main.js:25_reconcilerUpdateChildren @ main.js:26_updateChildren @ main.js:26updateChildren @ main.js:26_updateDOMChildren @ main.js:25updateComponent @ main.js:25receiveComponent @ main.js:25receiveComponent @ main.js:27_updateRenderedComponent @ main.js:25_performComponentUpdate @ main.js:25updateComponent @ main.js:25performUpdateIfNecessary @ main.js:25performUpdateIfNecessary @ main.js:27s @ main.js:27perform @ main.js:28perform @ main.js:28perform @ main.js:27N @ main.js:27closeAll @ main.js:28perform @ main.js:28batchedUpdates @ main.js:26u @ main.js:27r @ main.js:27enqueueForceUpdate @ main.js:27r.forceUpdate @ main.js:25n_ @ next.cljc:1418k.Gj @ next.cljc:2525dX @ protocols.cljc:11(anonymous function) @ next.cljc:1504
console.js:203  [ 55.451s] [om.next] transacted '[(time/refresh)], #uuid "fc021611-e4fc-4c1d-8763-af36d4940f05"

[alvinfrancis]

Seems like certain tags are getting mangled in advanced compilation when compiling down the generated React DOM fns. The React.DOM property access symbol generated in dom.cljc seems to be affected sometimes by the compilation. I'm not sure why.

Tried logging out all the tags while accessing the React.DOM property the same way (through macro-expansion of the symbol) and the dialog, picture, clipPath, and var tags were compiling down to mangled property React.DOM property names.

We could just ensure string property access to prevent compiler mangling. The following change to dom.cljc fixes the issue for me.

(defn ^:private gen-react-dom-fn [tag]
  `(defn ~tag [opts# & children#]
     (.apply (aget ~(symbol "js" "React.DOM") ~(name tag)) nil
             (cljs.core/into-array
              (cons opts# (cljs.core/map om.util/force-children children#))))))

[livtanong]

Just tested this out. Works perfectly for me! Thanks, @alvinfrancis :D

[anmonteiro]

Sorry but this is not an issue. You need to provide externs for SVG, that's it

[livtanong]

@anmonteiro I've tried using externs, but I can't seem to get the externs to work. In my build.boot, my cljs task:

(cljs :optimizations :advanced
  :compiler-options {:externs ["svg.ext.js"]})

I've placed svg.ext.js in the classpath (the one you sent me, from https://github.com/Hunga1/svg-externs and renamed it from svg.js to svg.ext.js.

Am I missing something?

[anmonteiro]

This turned out to be an issue with CLJSJS's packages. I submitted a PR (https://github.com/cljsjs/packages/pull/814) which should fix it. While the PR isn't merged you can add the externs manually on a per project basis.

Feel free to reopen if the issue persists even after the fix.