@juhoteperi what i get is React being included inline in my built JS file, and if I put react and react-dom in :exclusions, it fails to compile not finding the namespace

if i use the empty-namespace trick that worked in 0.7.0, i get an artifact which doesn't actually refer to React anywhere

Are you trying to use React from CDN?

effectively yes - it's from my own webpack bundle that exports React to window.

Tricky, I think you can do this by overriding the foreign-lib entry from Cljsjs.

that's included elsewhere on the page before my cljs bundle

ok - what might that look like?

Try adding this to compiler-options:

:foreign-libs
 [{:file "empty.js",
   :provides ["react" "react-dom" "create-react-class"],
   :requires [],
   :global-exports '{react React, react-dom ReactDOM, create-react-class createReactClass}}]

that whould point all the namespaces required by Reagent to empty file, and create the mapping from namespace to the global vars provided by the bundle

and if I recall correctly, this hopefully overrides the foreign-libs from Cljsjs with same provides

ok

i'll give that a shot

problem with the empty namespaces is that foreign libs and node modules currently take precedence over Cljs namespaces... which might be wrong but that's how Cljs is currently implemented

still getting an error - do i need to actually create that empty.js and put it alongside project.clj?

oh and empty namespaces aren't quite enough because Reagent now uses React "like it were real namespace"

yeah, if i turn of advanced optimisations i can see it producing var react = {}; and then failing to find everything

@alex339 Yes, you'll need the empty file, in project.clj you shouldn't use ' and you need to add ReactDOMServer if you use reagent.dom.server

ok, this is weird. if i add the empty.js, i get

clojure.lang.ExceptionInfo: failed compiling file:target/cljsbuild-compiler-1/reagent/impl/component.cljs {:file #object[java.io.File 0x2464490e "target/cljsbuild-compiler-1/reagent/impl/component.cljs"]}
...<stacktrace>...
Caused by: java.lang.IllegalArgumentException: contains? not supported on type: clojure.lang.PersistentList

still, getting somewhere!

I have some problems with Figwheel testing this, but the output looks correct

remove ' before the hash-map if you still have tha

in :global-exports? ok

yeah, it is required if calling cljs-build-api/build from Clojure code, but not in project.clj as that is data not code

ahh! this seems to have nearly done it - however the lines like these don't survive advanced optimisations:

reagent.impl.component.global$module$react = goog.global.React;

if i use :optimizations :simple i get something that works

It should keep the .React part? other names can be changed

Have you excluded Cljsjs deps? Those are needed to provide the externs

ah yes, i did - but if i don't exclude them, then the compiled artifact includes React inline, which is what i'm trying to avoid. 😞

i could just copy the externs from the cljsjs repo

No, adding this foreign-libs entry should override the files from Cljsjs but allow using the externs

ok

it works! THANK YOU!

ah, crap. spoke too soon

it only seems to work if i exclude the dependencies and add the externs in

otherwise react is inlined

gotta pack it in for today, thanks for your help @juhoteperi

@alex339 I extended this document to mention this environment: https://github.com/reagent-project/reagent/blob/master/docs/0.8-upgrade.md I'll try to get the config working myself later

this might be more of a reactjs question in general, but here goes! i have a fairly complex table component (reagent powered by re-frame) that does lots of things including io in the background. i have to show this component about 30 times on a report page and when i do it completely chokes the browser for a few seconds. is there a way to solve this problem internally rather than hiding tables until they're in view? maybe something to do with reagent.core/flush?

Sounds like you are creating a lot of new DOM

30 x tables

If so, I'd guess that creating all that DOM will be what's slow

Perhaps you might want to use the still-experimental re-frame-trace. Maybe.

thanks, @mikethompson. i'm pretty sure you're right - there are loads of elements that end up trying to be painted at once. i wasn't sure if adding ^:flush-dom to the event that stores the table data for viewing would help (about to test), but i have a feeling i'm barking up the wrong tree. i'll check out re-frame-trace and see where it takes me.

@joshkh If the problem turns out to be actual dom performance, you can checkout the react virtualized library, which is an incredibly sophisticated library and is designed to solve just this kind of problem. Note, it takes some doing to get it integrated into your project, but it does work as advertised.

i'll check it out @lee.justin.m! thanks for the tip, i hadn't heard of it before now.

I’m having a TON of trouble getting server-side-rendering working

the current example in reagent-cookbook is fairly outdated

are there any up-to-date documentation on getting server side rendering working for reagent?

OK, upgrading my CLJS dep to 1.9.946 helped things

now I’m getting “org.mozilla.javascript.EcmaError: TypeError: Cannot read property “renderToString” from undefined (rhino.clj#41)” in the REPL

cljs.user> (reagent.dom.server/render-to-string [:div "Hello"])
org.mozilla.javascript.EcmaError: TypeError: Cannot read property "renderToString" from undefined (rhino.clj#41)

when I deploy it to AWS Lambda (which is adding an additional boatload of complexity to this), I get the error Unable to import module 'index': Error

@lilactown I don't have time to help now, but Reagent uses prerendering itself to build the demo site: https://github.com/reagent-project/reagent/blob/master/build-example-site.sh#L16-L18 https://github.com/reagent-project/reagent/blob/master/project.clj#L71 https://github.com/reagent-project/reagent/blob/master/demo/sitetools/prerender.cljs

Reagent uses Node, not Rhino

same thing in Node.js

cljs.user=> (reagent.dom.server/render-to-string [:div "hello"])
repl:13
throw e__8630__auto__;
^

TypeError: Cannot read property 'renderToString' of undefined
    at reagent$dom$server$render_to_string (/Users/r627543/Code/fido/packages/functions/example/.cljs_node_repl/reagent/dom/server.js:22:62)

it seems to be a problem with how react is imported into the project,

i’m not sure how to filter the signal from the noise in the reagent repo