Build WebPackageError:ReferenceError:Image未定义（在“盖茨比开发”的“盖茨比构建”过程中工作正常）

尝试在您的

gatsby node.js

中使用以下代码段：

**failed Building static HTML for pages - 3.572s**

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  38 |             thrershold: 0,
  39 |             disableDragImage: function () {
> 40 |                 var transparent = new Image();
     | ^
  41 |                 transparent.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';      
  42 |                 return transparent;
  43 |             }()


  ***WebpackError: ReferenceError: Image is not defined***
  
  - index.js:40 
    node_modules/react-carousel-slider/es/index.js:40:1
  
  - index.js:43 
    node_modules/react-carousel-slider/es/index.js:43:14

有些人想做他们的东西。这在运行

gatsby develope

时非常有效，因为代码是在浏览器端编译的。但是，

gatsby build

发生在服务器端（您的节点服务器），显然没有窗口，因为它甚至还没有定义

这就是为什么您需要通过调用API将

null

加载程序添加到Web包的配置中，以避免服务器端的依赖关系

该规则是一个正则表达式（这就是为什么在斜杠之间），从字面上看，

test

值与

node\u modules

文件夹中的路径匹配，以查找依赖项位置，因此，您必须在其中输入确切的文件夹名称

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-carousel-slider/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}