search

LouisBarranqueiro / reapop

:postbox: A simple and customizable React notifications system
https://louisbarranqueiro.github.io/reapop
MIT License
1.55k stars 78 forks source link

window is not defined #72

Closed pantchox closed 6 years ago

pantchox commented 6 years ago

Configuration

Hi I am using React with server side rendering, i understand there is no window object on SSR but is there a workaround to calculate the window only when elements are rendered?

the error is in node_modules\reapop\lib\components\NotificationsSystem.js:51:20

thanks!

LouisBarranqueiro commented 6 years ago

👋 @pantchox

NotificationsSystem component needs to know the size of the window to choose where we display notifications (at the top of the screen or on the default position).

We could use top position if we cannot determine window width (window not defined), then register an event when the DOM is loaded, so we get the window width and re-render the component. I don't that much about server side rendering. Do you know if this could be possible?

pantchox commented 6 years ago

Hi,

This is a great idea! I am just using a boilerplate that uses SSR, so i am not an expert.

SSR is almost the same as regular react, just that there are some constraints because of global objects issues, since the first render happens on node and then sent as a static page to the client while it waits till the JS bundle will load and then it will take it from there.

If you search for "SSR react window not defined" i am sure you will find solutions that are suitable for this library, for me its hard to say since i didn't create it (reapop) but it seems this issue happens in many visualization JS libraries that already found a solution to this.

pantchox commented 6 years ago

Hi,

any news with this?

LouisBarranqueiro commented 6 years ago

@pantchox, not yet. Could you please send me a complete example (a dockerized project would be the best) that I can use to reproduce this bug and write a fix.

LouisBarranqueiro commented 6 years ago

👋 @pantchox, I'm closing this one for now. Feel free to re-open it when you have a complete example.