修复 Gatsby 中需要 window 的第三方模块

Question

所以，我对 webpack 不是很熟悉，但是，我正在尝试使用 Gatsby.js 中需要 'window' 的包。我在他们的文档中找到了以下 webpage ，并试图弄清楚我需要做什么才能让它工作，但没有成功。任何人都可以发出的任何光将不胜感激。这是我的：

盖茨比-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

在本地运行没有问题，但是当我尝试进行生产构建时我得到了这个：

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

Answer 1

将您的 setWebpackConfig 规则更改为：

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

模块规则是一个正则表达式，它匹配你node_modules中的文件夹名称，以便在代码被webpack转译时添加一个null加载器，这就是为什么你只需要添加文件夹斜杠之间的名称 (/).

请记住，您可能需要忽略 react-waves 也在使用的另一个依赖项。

修复 Gatsby 中需要 window 的第三方模块

Fixing third-party modules in Gatsby that require window

server-side-rendering

gatsby

wavesurfer.js