WebpackError: ReferenceError: window is not defined

Bug description

👋🏽Hello! I’ve included this library as part of a Gatsby & React project, however my build fails when I import this package.

Step 1 of the Usage section is a simple import mediumZoom from 'medium-zoom'. When I add this import to the top of my JS file my build fails with the following response:

4:36:32 PM:   WebpackError: ReferenceError: window is not defined
4:36:32 PM:   
4:36:32 PM:   - medium-zoom.esm.js:1 Module../node_modules/medium-zoom/dist/medium-zoom.esm.    js
4:36:32 PM:     [lib]/[medium-zoom]/dist/medium-zoom.esm.js:1:1800

It looks like this is a common error where there’s no window server-side but this package’s code is being run & flagged by Webpack. Is there any way around this?

Gatsby has the following page with some possible leads to a solution— Debugging HTML Builds

I’ve tried the part about Fixing Third-party Modules, but to no avail. After editing the Webpack-Config the build completes, however, when calling the function the console says mediumZoom is not a function as if the import is ignored altogether.

---

How to reproduce

A list of the steps to reproduce the bug.

1. Import medium-zoom per the docs
2. Add mediumZoom(selector, options) call to ComponentDidMount (after the image elements are rendered)
3. Works beautifully in Dev
4. Run gatsby build to generate a production build
5. See error

Expected behavior

The build should complete to deploy!

Environment

• Browser: All
• medium-zoom version: Latest

[francoischalifour]

I gave it a try @DrianHillman and my recommendation would be to use a dynamic import:

class Template extends React.Component {
  zoom = null

  componentDidMount() {
    import('medium-zoom').then(mediumZoom => {
      this.zoom = mediumZoom.default('.zoomable img')
    })
  }

  componentWillUnmount() {
    if (this.zoom) {
      this.zoom.detach()
    }
  }
}

[DrianHillman]

🎉 This is now working beautifully, François — thanks for helping troubleshoot! @francoischalifour