Does not function correctly under advanced compilation (multiple copies of react and react-dom included)

[retrogradeorbit]

Whenever I include this project, and do an advanced compile, the compilation includes two copies of React and ReactDOM leading to this error in the console:

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

cleaning the deps tree of all other react and react-doms, then do an advanced compile (mine has :pretty-print true, :pseudo-names true), then look at the build artifact for react comment headers:

$ grep "^ [*] React" target/cljsbuild/public/js/app.js

• React v15.6.1
• ReactDOM v15.6.1
• React v15.6.1
• ReactDOM v15.6.1

And you can see there are two copies of both.

Has anyone else got this working on advanced compile, or is it something shitty about my project setup.

My deps at the moment are:

[
                 [clj-time "0.14.0"]
                 [cljs-ajax "0.7.2"]
                 [compojure "1.6.0"]
                 [cprop "0.1.11"]
                 [funcool/struct "1.1.0"]
                 [luminus-immutant "0.2.3"]
                 [luminus-nrepl "0.1.4"]
                 [luminus/ring-ttl-session "0.3.2"]
                 [markdown-clj "1.0.1"]
                 [metosin/muuntaja "0.3.2"]
                 [metosin/ring-http-response "0.9.0"]
                 [mount "0.1.11"]
                 [org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.9.908" :scope "provided"]
                 [org.clojure/tools.cli "0.3.5"]
                 [org.clojure/tools.logging "0.4.0"]
                 [org.webjars.bower/tether "1.4.0"]
                 [org.webjars/bootstrap "4.0.0-alpha.5"]
                 [org.webjars/font-awesome "4.7.0"]
                 [reagent "0.7.0" :exclusions [cljsjs/react-dom-server cljsjs/react-dom cljsjs/react]]
                 [reagent-utils "0.2.1"]
                 [ring-webjars "0.2.0"]
                 [ring/ring-core "1.6.2"]
                 [ring/ring-defaults "0.3.1"]
                 [secretary "1.2.3"]
                 [selmer "1.11.1"]

                 [cljs-react-material-ui "0.2.48" :exclusions
                  [org.clojure/clojure]]
                 [cljsjs/material-ui-chip-input "0.17.2-0" :exclusions [cljsjs/react cljsjs/react-dom]]
                 [org.clojure/core.async "0.3.443"]
                 ]

and lein deps :tree gives:

 [binaryage/devtools "0.9.4"]
   [binaryage/env-config "0.2.0"]
 [clj-time "0.14.0"]
   [joda-time "2.9.7"]
 [cljs-ajax "0.7.2"]
   [cheshire "5.7.1"]
     [com.fasterxml.jackson.core/jackson-core "2.8.6"]
     [com.fasterxml.jackson.dataformat/jackson-dataformat-cbor "2.8.6"]
     [com.fasterxml.jackson.dataformat/jackson-dataformat-smile "2.8.6"]
     [tigris "0.1.1"]
   [com.cognitect/transit-clj "0.8.300"]
     [com.cognitect/transit-java "0.8.324"]
       [org.msgpack/msgpack "0.6.12"]
         [com.googlecode.json-simple/json-simple "1.1.1" :exclusions [[junit]]]
         [org.javassist/javassist "3.18.1-GA"]
   [com.cognitect/transit-cljs "0.8.239"]
     [com.cognitect/transit-js "0.8.846"]
   [net.colourcoding/poppea "0.2.1"]
   [org.apache.httpcomponents/httpasyncclient "4.1.3"]
     [commons-logging "1.2"]
     [org.apache.httpcomponents/httpclient "4.5.3"]
     [org.apache.httpcomponents/httpcore-nio "4.4.6"]
   [org.apache.httpcomponents/httpcore "4.4.6"]
 [cljs-react-material-ui "0.2.48" :exclusions [[org.clojure/clojure]]]
   [cljsjs/material-ui "0.19.0-0"]
   [cljsjs/react-dom "15.6.1-1"]
   [cljsjs/react "15.6.1-1"]
   [sablono "0.8.0"]
 [cljsjs/material-ui-chip-input "0.17.2-0" :exclusions [[cljsjs/react] [cljsjs/react-dom]]]
 [clojure-complete "0.2.4" :exclusions [[org.clojure/clojure]]]
 [com.cemerick/piggieback "0.2.2"]
 [compojure "1.6.0"]
   [clout "2.1.2"]
     [instaparse "1.4.0" :exclusions [[org.clojure/clojure]]]
   [medley "1.0.0"]
   [org.clojure/tools.macro "0.1.5"]
   [ring/ring-codec "1.0.1"]
 [cprop "0.1.11"]
 [doo "0.1.8"]
   [karma-reporter "0.1.0"]
 [figwheel-sidecar "0.5.14"]
   [com.stuartsierra/component "0.3.2"]
     [com.stuartsierra/dependency "0.2.0"]
   [figwheel "0.5.14" :exclusions [[org.clojure/tools.reader]]]
   [hawk "0.2.11" :exclusions [[org.clojure/clojure]]]
     [net.incongru.watchservice/barbary-watchservice "1.0"]
       [net.java.dev.jna/jna "3.2.2"]
   [http-kit "2.2.0"]
   [ring-cors "0.1.11" :exclusions [[ring/ring-core] [org.clojure/clojure]]]
   [simple-lein-profile-merge "0.1.4"]
   [strictly-specking-standalone "0.1.1"]
     [net.cgrand/parsley "0.9.3" :exclusions [[org.clojure/clojure]]]
       [net.cgrand/regex "1.1.0"]
     [net.cgrand/sjacket "0.1.1" :exclusions [[org.clojure/clojure] [net.cgrand/parsley]]]
   [suspendable "0.1.1" :exclusions [[org.clojure/clojure] [com.stuartsierra/component]]]
 [funcool/struct "1.1.0"]
   [funcool/cuerdas "2.0.3"]
 [luminus-immutant "0.2.3"]
   [org.immutant/web "2.1.6"]
     [org.immutant/core "2.1.6"]
     [org.projectodd.wunderboss/wunderboss-clojure "0.12.2"]
     [org.projectodd.wunderboss/wunderboss-web-undertow "0.12.2"]
       [io.undertow/undertow-core "1.3.23.Final"]
         [org.jboss.xnio/xnio-api "3.3.6.Final"]
         [org.jboss.xnio/xnio-nio "3.3.6.Final" :scope "runtime"]
       [io.undertow/undertow-servlet "1.3.23.Final"]
         [org.jboss.spec.javax.annotation/jboss-annotations-api_1.2_spec "1.0.0.Final"]
       [io.undertow/undertow-websockets-jsr "1.3.23.Final"]
       [org.projectodd.wunderboss/wunderboss-core "0.12.2"]
         [ch.qos.logback/logback-classic "1.1.3"]
           [ch.qos.logback/logback-core "1.1.3"]
         [org.jboss.logging/jboss-logging "3.2.1.Final"]
       [org.projectodd.wunderboss/wunderboss-web "0.12.2"]
         [org.jboss.spec.javax.servlet/jboss-servlet-api_3.1_spec "1.0.0.Final"]
         [org.jboss.spec.javax.websocket/jboss-websocket-api_1.1_spec "1.1.0.Final"]
 [luminus-nrepl "0.1.4"]
 [luminus/ring-ttl-session "0.3.2"]
   [expiring-map "0.1.8"]
     [net.jodah/expiringmap "0.5.8"]
 [markdown-clj "1.0.1"]
 [metosin/muuntaja "0.3.2"]
 [metosin/ring-http-response "0.9.0"]
   [potemkin "0.4.3"]
     [clj-tuple "0.2.2"]
     [riddley "0.1.12"]
 [mount "0.1.11"]
 [org.clojure/clojure "1.8.0"]
 [org.clojure/clojurescript "1.9.908" :scope "provided"]
   [com.google.javascript/closure-compiler-unshaded "v20170806" :scope "provided"]
     [args4j "2.33" :scope "provided"]
     [com.google.code.findbugs/jsr305 "3.0.1" :scope "provided"]
     [com.google.code.gson/gson "2.7" :scope "provided"]
     [com.google.errorprone/error_prone_annotations "2.0.18" :scope "provided"]
     [com.google.guava/guava "20.0" :scope "provided"]
     [com.google.javascript/closure-compiler-externs "v20170806" :scope "provided"]
     [com.google.jsinterop/jsinterop-annotations "1.0.0" :scope "provided"]
     [com.google.protobuf/protobuf-java "3.0.2" :scope "provided"]
   [org.clojure/data.json "0.2.6"]
   [org.clojure/google-closure-library "0.0-20170809-b9c14c6b" :scope "provided"]
     [org.clojure/google-closure-library-third-party "0.0-20170809-b9c14c6b" :scope "provided"]
   [org.clojure/tools.reader "1.0.5"]
   [org.mozilla/rhino "1.7R5" :scope "provided"]
 [org.clojure/core.async "0.3.443"]
   [org.clojure/tools.analyzer.jvm "0.7.0"]
     [org.clojure/core.memoize "0.5.9"]
       [org.clojure/core.cache "0.6.5"]
         [org.clojure/data.priority-map "0.0.7"]
     [org.clojure/tools.analyzer "0.6.9"]
     [org.ow2.asm/asm-all "4.2"]
 [org.clojure/tools.cli "0.3.5"]
 [org.clojure/tools.logging "0.4.0"]
 [org.clojure/tools.nrepl "0.2.12" :exclusions [[org.clojure/clojure]]]
 [org.webjars.bower/tether "1.4.0"]
 [org.webjars/bootstrap "4.0.0-alpha.5"]
   [org.webjars/jquery "1.11.1"]
 [org.webjars/font-awesome "4.7.0"]
 [pjstadig/humane-test-output "0.8.3"]
 [prone "1.1.4"]
 [reagent-utils "0.2.1"]
 [reagent "0.7.0" :exclusions [[cljsjs/react-dom-server] [cljsjs/react-dom] [cljsjs/react]]]
   [cljsjs/create-react-class "15.5.3-0"]
 [ring-webjars "0.2.0"]
   [org.webjars/webjars-locator "0.27"]
     [com.fasterxml.jackson.core/jackson-databind "2.3.3"]
       [com.fasterxml.jackson.core/jackson-annotations "2.3.0"]
     [org.apache.commons/commons-lang3 "3.4"]
     [org.webjars/webjars-locator-core "0.27"]
       [org.apache.commons/commons-compress "1.9"]
       [org.slf4j/slf4j-api "1.7.7"]
 [ring/ring-core "1.6.2"]
   [commons-fileupload "1.3.2"]
   [commons-io "2.5"]
   [crypto-equality "1.0.0"]
   [crypto-random "1.2.0"]
 [ring/ring-defaults "0.3.1"]
   [javax.servlet/javax.servlet-api "3.1.0"]
   [ring/ring-anti-forgery "1.1.0"]
   [ring/ring-headers "0.3.0"]
   [ring/ring-ssl "0.3.0"]
 [ring/ring-devel "1.6.2"]
   [clj-stacktrace "0.2.8"]
   [hiccup "1.0.5"]
   [ns-tracker "0.3.1"]
     [org.clojure/java.classpath "0.2.3"]
     [org.clojure/tools.namespace "0.2.11"]
 [ring/ring-mock "0.3.1"]
 [secretary "1.2.3"]
   [com.cemerick/clojurescript.test "0.2.3-20140317.141743-3"]
 [selmer "1.11.1"]
   [commons-codec "1.10"]
   [json-html "0.4.0"]
     [hiccups "0.3.0"]

[Tebro]

I am having the exact same issue, can only do production builds with :optimizations set to :none

[Tebro]

So I fixed this issue by moving the :require [cljsjs.material-ui] to the top of my core.cljs :require statement.

[antonmos]

In my project, moving the :require [cljsjs.material-ui] to the top of my core.cljs did not help.
However, adding the following to :dependencies did!

[cljsjs/react "15.6.2-4"]
[cljsjs/react-dom "15.6.2-4"]

commit for 15.6.2 seems to have added support for Global Exports but i dont know enough to understand if that's what helped.

Either way, it might be a good idea to update the readme to recommend 15.6.2-4