search

Limenius / ReactBundle

Client and Server-side React.js rendering in a Symfony Bundle
MIT License
390 stars 53 forks source link

displaying trace errors message #26

Closed wajaja closed 6 years ago

wajaja commented 6 years ago

Hello; I got this message : << document.createElement is not function >> when i try a server side rendering; so how can i get all javascript trace of this error?

nacmartin commented 6 years ago

Hi @wajaja. I can tell you what is going on. In server side rendering there is no document at all, and no DOM.

https://github.com/facebook/react/issues/3620

So you cannot create elements in the DOM or things like that, since there is no browser or DOM. You have to find a way to circumvent this.

Notice that this bundle gives you a context variable that you can use to determine if you are in SSR or not:

https://github.com/Limenius/symfony-react-sandbox/blob/cfc0b37456637b6440ab89059028915607b3049e/client/js/recipes/startup/RecipesApp.js#L15

But basically, avoid doing things related to using the document (or timers, or...) when rendering server side. Typically you can put that code in componentDidMount, as those lifecycle callbacks are not called in server side rendering.

There is sadly nothing we can do in this bundle, as this is an issue of how React works, so I am closing this issue.

wajaja commented 6 years ago

Thank you @nacmartin for good explaination; so is it possible to get all trace error message?

nacmartin commented 6 years ago

It is tricky to get good tracing because it is JS (most likely bundled and minified) throwing an error in some temporal file in your system, then getting the error in PHP, but the tools we have can be configured: trace and fail_loud:

https://github.com/Limenius/ReactBundle/blob/master/Resources/doc/index.md#step-3-optional-configure-the-bundle

Here we are open to suggestions (and contributions) about how to improve the debugging experience. Generally the code can be debugged for the client side and the server side will just work, but for cases like yours, where something wants to access the document, it cannot be worked out in the client side, so the only option is debugging SSR, which is more painful, yes.