WebpackError: ReferenceError: Image is not defined (during "gatsby build" by "gatsby develop" works fine)

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

Try using the following snippet in your gatsby-node.js:

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

Some third-party dependencies use some global objects like window or document to make their stuff. This is perfectly valid when running gatsby develop since the code is compiled on the browser-side. However, gatsby build occurs in the server-side (your Node server) where obviously no window, because it's not even already defined yet.

That's why you need to add a null loader to the webpack's config by calling the onCreateWebpackConfig API, to avoid the dependency transpilation on the server-side.

The rule is a regular expression (that's why is between slashes) and literally, the test value matches a path in your node_modules folder to look for the dependency location, so, you must put there the exact folder name.