Fixing third-party modules in Gatsby that require window

user_6719483 0
Viewed 759

So, I am not very familiar with webpack, however, I am trying to use a package in Gatsby.js that requires 'window'. I found the following webpage in their docs, and have tried to figure out what I need to do to make it work, but to no success. Any light anyone can shed would be very appreciated. This is what I have:

gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage.startsWith("develop")) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "react-dom": "@hot-loader/react-dom",
        },
      },
    })
  }

  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: path.resolve(__dirname, '/node_modules/@nhanzel/react-waves/'),
            use: loaders.null(),
          },
        ],
      },
    })
  }

}

WavePlayer.js 

import ReactWaves from '@nhanzel/react-waves'
...

const WavePlayer = ({ ... }) => {
  ...
  <ReactWaves
    ...
  />
  ...
}

export default WavePlayer

runs locally no problem, but I get this when I try to do a production build:

failed Building static HTML for pages - 18.429s
error "window" is not available during server-side rendering.

  18 | (function webpackUniversalModuleDefinition(root, factory) {
  19 |  module.exports = factory();
> 20 | })(window, function() {
     |  ^
  21 | return /******/ (function(modules) { // webpackBootstrap
  22 | /******/         // The module cache
  23 | /******/         var installedModules = {};


  WebpackError: ReferenceError: window is not defined

wavesurfer.js gatsby server-side-rendering
1 Answers

Change your setWebpackConfig rule to:

actions.setWebpackConfig({
  module: {
    rules: [
      {
        test: /react-waves/,
        use: loaders.null(),
      },
    ],
  },
})

The module rule is a regular expression that matches the folder name in your node_modules to add a null loader when the code is transpiled by webpack, that's why you need to add just the folder name between slashes (/).

Keep in mind that you may need to omit another dependency that react-waves is using too.

user_55853710
Related