react-medium-image-zoom: React Portal is incompatible with SSR

Hi,

I’ve been using react-medium-image-zoom in a Gatsby project and while in development it has been working, it doesnt when you try to build your project.

 ERROR #95312 

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html


  68 |     overlayBgColorStart: overlayBgColorStart,
  69 |     parentRef: wrapRef,
> 70 |     portalEl: portalEl || document.body,
     | ^
  71 |     scrollableEl: scrollableEl || window,
  72 |     transitionDuration: transitionDuration,
  73 |     zoomMargin: zoomMargin,


  WebpackError: ReferenceError: document is not defined
  
  - Controlled.js:70 Controlled
    node_modules/react-medium-image-zoom/dist/esm/Controlled.js:70:1

Btw, I am using the Uncontrolled Zoom.

I found these 2 packages, that could help:

But there is another possible solution that you would need to ask the consumer to also install this package if he/she were to use react-medium-image-zoom in Gatsby https://www.gatsbyjs.org/packages/gatsby-plugin-portal/

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 25 (25 by maintainers)

Most upvoted comments

Cool. Thank you for taking the time. Ok.

dougg0k on Mar 5, 2020

Got it. Try 4.1.0-alpha.1

rpearce on Mar 5, 2020

You wanted a project to test, here it is, just run with npm run build.

https://github.com/dougg0k/testing_react-medium-image-zoom

dougg0k on Mar 4, 2020