bjgrosse / react-resize-panel

Simple React resize panel component
MIT License
139 stars 55 forks source link

ReferenceError: document is not defined; SSR. #11

Open MorpheusFT opened 4 years ago

MorpheusFT commented 4 years ago

const doc = document, win = window, div = doc.createElement('div'), { filter, indexOf, map, push, reverse, slice, some, splice } = Array.prototype;

I render it server side first, then later hydrate on the client side, which is probably why your component fails.

willydavid1 commented 4 years ago

If you are using next js you just have to tell next to import and render the component only on the client and not to apply ssr for that component, this for libraries that for example run only in the browser. I recommend these links

https://nextjs.org/docs/advanced-features/dynamic-import

https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages

chriscoyier commented 3 years ago

For Next.js, this seems to work for me:

const ResizePanel = dynamic(() => import('react-resize-panel'), { ssr: false });

Would be nice to support SSR I think? Even if it's non-functional and just does the basic DOM element wrapping or whatever.