Fix HistoryLocation in React v0.13 Example

[ericclemmons]

Hi!

Using HistoryLocation, instead of RefreshLocation as used in the examples, I'm only able to navigate via react-router (both Link component and transitionTo('')) once pr. page load. I've tried to fiddle around with both the source for react-router and react-resolver, but without success. The URL changes, but the

I've reduced my issue down to this repo, which can be run with npm install and npm run watch. If you uncomment 11th line and comment the 10th line in src/client.js, you'll notice that routing works, but obviously serverside rendering does not. This leads me to think this could be a Resolver problem.

Anyone having the same issue? Have I done something wrong? I've tried to implement Resolver as per the examples as close as possible.

[ericclemmons]

@ostrgard This seems to be a bug with React Router v0.13, whereas it works fine in React Router v0.14.

The crazy part is, router.run(function() { // THIS SHOULD BE CALLED ON TRANSITION }) never runs.

Thanks for putting together this demo! What I'm afraid of is there being an issue with context, which is well-known in React v0.13, but I hope there's a solution.

[ostrgard]

Thanks for the answer, Eric.

I've just noticed a mistake I made. I put the __REACT_RESOLVER_PAYLOAD__ after loading the script. So I had no initial data. Doh. It does not entirely solve my problem though.

Can you explain Resolvers render function to me?

static render = function(render, node) {
    const initialData = window.__REACT_RESOLVER_PAYLOAD__;

    // Server-rendered output, but missing payload
    if (!initialData && node.innerHTML) {
      return Resolver.resolve(render).then(({ Resolved }) => {
        // @TODO - Use react-dom.render
        React.render(<Resolved />, node);
      });
    }

    // @TODO - Use react-dom.render
    React.render((
      <Resolver data={initialData}>
        {render}
      </Resolver>
    ), node);

    delete window.__REACT_RESOLVER_PAYLOAD__;
  }

If I comment out the last line, my routing works. Do you mean to execute the if statement block on second render? Maybe you meant to do !initialData && !node.innerHTML to make sure the node is actually empty.

[ericclemmons]

Sure! (This will end up going in the docs to avoid confusion)

• Resolver.render(() => <Foo />, document.getElementById("app")) on an empty <div id="app"></div> node will render just like React.render would - completely async.
• If the <div id="app"> already has content, the Resolver will render the entire tree in memory and then mount on <div id="app">. This prevents clearing the DOM while data is loaded on the client-side.
• Finally, the ideal scenario is having __REACT_RESOLVER_PAYLOAD defined from the server in which Resolver.render() is a synchronous operation since all of the data already exists.

Are you saying that by commenting out delete window.__REACT... it worked?

[ericclemmons]

All I'd need to see is the order & how you're outputting the payload + script.

Notice how in the React v0.13 Example I use <script defer> to have to script on after DOMReady.

Perhaps I should remove that since many aren't aware of how that works?

[ostrgard]

I'm sure it worked, yes. Try the repo i created (make sure you pull the latest, I've positioned the payload, so it's present for the script). Go into your build file in node_modules and comment it out. I've located it to when this renders...

Resolver.resolve(render).then(({ Resolved }) => {
        // @TODO - Use react-dom.render
        React.render(<Resolved />, node);
});

... it stops running the render function for the rest of the app lifetime. You wrote a comment to this if statement: "Server-rendered output, but missing payload". But it runs the first time I navigate – we did delete the payload and the node is populated. Commenting out delete window.__REACT_RESOLVER_PAYLOAD__; just resulted in this never running, which is why it worked.

[ericclemmons]

Great debugging! I really appreciate it!

I'll dig into this then & push out a fix...

[ostrgard]

Sounds good! Really nice work you've done so far! Please ask if you need more info!

[ericclemmons]

This also seems related to #69, which I'm taking care of in this issue...

[ericclemmons]

I was able to isolate the bug to specifically client.js:

// Works with HistoryLocation
React.render(<Root />, document.getElementById("app"));

// HistoryLocation does not update past the first or second route
Resolver.render(() => <Root />, document.getElementById("app"));

I'll dig in, but I'd wager it's because after Resolve.render "finishes", the resolved data is never cleared out...

[ericclemmons]

This was the crux of the solution: If the DOM has content but the payload is missing, _fetch the payload & call Resolver.render with it :)

Sometimes the best answer for recursion is recursion!

[ericclemmons]

This is nearly fixed, but I've also cleaned up the examples a bit as well.

[ericclemmons]

Confirmed working! I'll merge & patch release this shortly...

[ericclemmons]

So sleepy...I'll do this tomorrow.

[ostrgard]

Happy you found a solution. Sleep tight!

[ericclemmons]

Uh... shoot. You shouldn't have closed this.

[ostrgard]

Please forgive my lack of Github skills.