Webpack错误：引用错误：未定义图像(在"gatsby build"期间由"gatsby develop"工作正常)

Question

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

Answer 1

尝试在您的gatsby-node.js中使用以下代码片段:

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

一些第三方依赖使用一些全局对象，如window或document来制作它们的东西。这在运行gatsby develop时是完全有效的，因为代码是在浏览器端编译的。但是，gatsby build发生在服务器端(您的Node服务器)，那里显然没有窗口，因为它甚至还没有定义。

这就是为什么你需要通过调用onCreateWebpackConfigAPI将null加载器添加到webpack的配置中，以避免在服务器端依赖编译。

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