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

问题描述

因此，我对webpack不太熟悉，但是，我试图在Gatsby.js中使用需要“窗口”的软件包。我在他们的文档中发现了以下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

解决方法

将您的setWebpackConfig规则更改为：

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

模块规则是一个正则表达式，它与您的node_modules中的文件夹名称匹配，以便在webpack编译代码时添加一个null加载器，这就是为什么您只需要在之间添加文件夹名称的原因斜线（{/）。

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

gatsby server-side-rendering wavesurfer.js