script async=true prevents react_ujs from working when prerendering

[blainekasten]

as title states. If I make my javascript_include_tag 'application', async: true then the server side rendered items are never reconciled.

[rmosolgo]

Hum, I wonder if it just misses the document.DOMContentLoaded event?

https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb#L89

[SqueezedLight]

Hi, seems i can not get things working with javascript_include_tag 'application', async: true

Any ideas how to fix that?

Thanks!

[rmosolgo]

I suspect it's the same issue as described here:

http://stackoverflow.com/questions/9237044/async-loaded-scripts-with-domcontentloaded-or-load-event-handlers-not-being-call

Because the react-rails UJS mounts components on DOMContentLoaded: https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb#L90-L94

You could mount components manually at the end of your script with

ReactRailsUJS.mountComponents()

[SqueezedLight]

Ok ,thanks for your help. That solved the problem.

[rmosolgo]

🎉