[gatsby-plugin-image] causes Uncaught ReferenceError: global is not defined

[kelvindecosta]

Overview

gatsby-plugin-image isn't playing nice with other plugins like gatsby-plugin-use-dark-mode that require the global variable.

I might be wrong here but,
based on a minimal reproduction and some debugging,
I think that the issue lies with the plugin's Gatsby Node API calls that are affecting
the webpack configuration.

Reproduction

You can follow the instructions below or refer this example on CodeSandbox:

• Start with gatsby-starter-default.

• Add these packages:

  yarn add gatsby-plugin-use-dark-mode use-dark-mode

• Upgrade packages (optional)

  yarn upgrade

• Add gatsby-plugin-use-dark-mode to the list of plugins.

• Invoke the useDarkMode hook in the Layout component, destructure value and wrap it in a div.

Behavior

Actual

The development server throws no relevant warnings or errors in the terminal.

The browser console logs the following error message:

Uncaught ReferenceError: global is not defined
    at d (use-dark-mode.m.js:1)

The same can be seen in the following screenshot:

Expected

This error should not exist and the site should run smoothly.

Environment

Running gatsby info on the reproduction.

  System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-4700HQ CPU @ 2.40GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.4/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Languages:
    Python: 3.9.1 - /usr/bin/python
  npmPackages:
    gatsby: ^3.0.1 => 3.0.3
    gatsby-plugin-gatsby-cloud: ^2.0.0 => 2.0.0
    gatsby-plugin-image: ^1.0.0 => 1.0.0
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-plugin-use-dark-mode: ^1.3.0 => 1.3.0
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby-cli: 2.19.1

Conclusion

As mentioned previously, I think there issue lies with the changing of the Webpack configuration.
The polyfill for global seems to be affected, since the browser says it is not defined.

[kelvindecosta]

Context

This was originally reported here: wKovacs64/gatsby-plugin-use-dark-mode#73.
I realized the issue was with gatsby-plugin-image by adding the plugins one by one.