Window Missing on Server-side Rendering about react-pixi-fiber HOT 5 CLOSED

Sweet, thanks for the direction, I will take a look. Again, appreciate all the work you've put into this!

from react-pixi-fiber.

Hi @KylePalko, it should be fairly easy to fix for server-side rendering by lazy loading the Stage (this is now very easy with React 16.6+) and rendering it behind a flag that checks if the render is within browser context. The other issue is that PixiJS itself probably needs a window object so it would need to be lazily imported as well.

However, I understand this might be an unnecessary boilerplate so I am open to receiving a pull request that solves this without having to change the app code. See #80 for more context. Please note that stubbing Stage to return children is probably not the best idea – for SSR it would be better to just render the canvas element with its props and skip the logic related to instantiating PixiJS Application and react-pixi-fiber rendering.

from react-pixi-fiber.

React.lazy isn't available for SSR yet :/ The React docs point towards using Loadable Components module though. Is that what you were imagining?

for SSR it would be better to just render the canvas element with its props and skip the logic related to instantiating PixiJS Application and react-pixi-fiber rendering.

Can you give me a bit of direction on how this might work? How would I render the canvas element server-side? You're blowing my mind here man XD

EDIT: Also, thanks for all your hard work, this module is awesome!

from react-pixi-fiber.

@KylePalko ah, you're right, lazy is not in SSR yet.

How would I render the canvas element server-side

Stage already renders canvas element so probably nothing to change here.

I think all that's really needed is:

1. Not loading PIXI if not in browser context. This would probably mean changing this import to require behind if condition.
2. Changing Stage's componentDidMount to no-op if not in browser context.

from react-pixi-fiber.

See if the solution in this comment fits.

from react-pixi-fiber.