react-medium-image-zoom: Element not defined in SSR builds

This issue is a:

Question / support request

Description

When this library is included in a Gatsby site, it works fine in development.

However, when a production build is generated using SSR, the absence of the Element object causes the process to fail:

1:47:39 PM: failed Building static HTML for pages - 9.002s
1:47:39 PM: error Building static HTML failed
1:47:39 PM:   121 |   overlayBgColorStart: string.isRequired,
1:47:39 PM:   122 |   parentRef: object.isRequired,
1:47:39 PM: > 123 |   portalEl: instanceOf(Element).isRequired,
1:47:39 PM:       |                       ^
1:47:39 PM:   124 |   scrollableEl: oneOfType([object, instanceOf(Element), instanceOf(Window)]).isRequired,
1:47:39 PM:   125 |   transitionDuration: number.isRequired,
1:47:39 PM:   126 |   zoomMargin: number.isRequired
1:47:39 PM: 
1:47:39 PM:   WebpackError: ReferenceError: Element is not defined
1:47:39 PM:   
1:47:39 PM:   - UncontrolledActivated.js:123 Module../node_modules/react-medium-image-zoom/d    ist/esm/UncontrolledActivated.js
1:47:39 PM:     node_modules/react-medium-image-zoom/dist/esm/UncontrolledActivated.js:123:2    3
1:47:39 PM:   
1:47:39 PM:   - index.js:1 Module../node_modules/react-medium-image-zoom/dist/esm/index.js
1:47:39 PM:     node_modules/react-medium-image-zoom/dist/esm/index.js:1:1

A Gatsby-specific workaround for this is:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-medium-image-zoom/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

But when doing so, you also lose the CSS normally imported thusly:

import 'react-medium-image-zoom/dist/styles.css';

Which breaks the zooming.

So to work around this, I added the rollup build of the CSS to the Gatsby project and imported it as if it were a local CSS file.

It seems that the offending functionality is only used in propTypes, so I was wondering whether there is an option in rollup to either

Supply some substitute for the Element object for non-browser environments, or
Publish a version of the library that strips out the propTypes for SSR purposes (since propTypes are generally only used during development)

About this issue

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

Most upvoted comments

Just ran into the issue that css was missed in production build. Eventually my colleague found the source of error and thus we would like to share here.

In line 34 of package.json, sideEffects is set to false which excludes css file imported in production build. Removing the line or setting it as sideEffects: ["**/*.css"] solves the problem.

henrych4 on Jan 22, 2020

I can confirm that this SSR is fixed with the simple repro and in Gatsby.

As a side note to those googling this issue, you might be seeing an issue with

import 'react-medium-image-zoom/dist/styles.css';

working in dev but get getting excluded from production builds of Gatsby and next.js.

IMHO this is not related to the SSR-izibility which this particular issue addresses. Rather this is related to to the many sagas of managing CSS in various Javascript framework pipelines, which is a completely different issue.

0x6e6562 on Jan 8, 2020