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

Question

所以，我对 webpack 不太熟悉，但是，我尝试在 Gatsby.js 中使用需要“window”的包。我发现了以下webpage在他们的文档中，并试图弄清楚我需要做什么才能使其发挥作用，但没有成功。任何人都能提供的任何帮助都将不胜感激。这就是我所拥有的:

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

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

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 也在使用的另一个依赖项。