airbnb / hypernova

A service for server-side rendering your JavaScript views

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hypernova ignoring props sometimes

dpuscher opened this issue · comments

I am sorry if the description of my issue is a big vague, but I am not really sure where to start when fixing that error.
I am testing hypernova with hypernova-ruby in a Rails 4.2 environment. Server-side rendering works very well most of the time. But sometimes it seems like there are no props passed to the component for rendering (in hypernova).
I already checked the context (in getComponent function) and the props are passed to the server, anyhow the resulting string is build with the default props.

Any idea where to start on this?

What's your top-level component look like?

My top level component isn't special. I will try to implement a minimum-example which shows the problem. 😊

Okay, I figured out what my problem was: I am loading my javascript asynchronously in the head. So the javascript got executed before the dom was ready. This lead to the situation that the renderReactmethod got called when the placeholder-div was present but the script-tag containing the data was not. Also some components which appeared later in the dom were not initialized.

I am using the following code to make sure the dom is ready before initializing the components:

const renderReactComponents = () => {
  renderReact("Foo", Foo);
};

const domLoaded = () => {
  document.removeEventListener("DOMContentLoaded", domLoaded);
  window.removeEventListener("load", domLoaded);
  renderReactComponents();
};

if (typeof document !== "undefined" && document.readyState !== "loading") {
  renderReactComponents();
} else {
  document.addEventListener("DOMContentLoaded", domLoaded);
  window.addEventListener("load", domLoaded);
}