WebpackError：ReferenceError：图像未定义（在“gatsby build”期间，“gatsby develop”工作正常）答案

【问题标题】：WebpackError: ReferenceError: Image is not defined (during "gatsby build" by "gatsby develop" works fine)WebpackError：ReferenceError：图像未定义（在“gatsby build”期间，“gatsby develop”工作正常）
【发布时间】：2021-04-21 06:35:39
【问题描述】：

**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

【问题讨论】：

标签： build gatsby gatsby-image gatsby-plugin

【解决方案1】：

尝试在您的gatsby-node.js 中使用以下 sn-p：

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

一些third-party dependencies use some global objects like window or document 来制作他们的东西。这在运行gatsby develop 时完全有效，因为代码是在浏览器端编译的。但是，gatsby build 出现在服务器端（您的 Node 服务器）显然没有窗口，因为它甚至还没有定义。

这就是为什么您需要通过调用onCreateWebpackConfig API 将null 加载器添加到 webpack 的配置中，以避免在服务器端进行依赖项转换。

规则是一个正则表达式（这就是为什么在斜杠之间），从字面上看，test 值与您的 node_modules 文件夹中的路径匹配以查找依赖项位置，因此，您必须将确切的文件夹名称放在那里.

【讨论】：