search

madvas / cljs-react-material-ui

Clojurescript library for using material-ui.com
Eclipse Public License 1.0
205 stars 32 forks source link

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

Open retrogradeorbit opened 6 years ago

retrogradeorbit commented 6 years ago

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

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 commented 6 years ago

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

Tebro commented 6 years ago

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

antonmos commented 6 years ago

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