[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.

[LekoArts]

Hi! I moved this since the image plugin is only adding a webpack name:

gatsby/packages/gatsby-plugin-image/src/gatsby-node.ts

Lines 22 to 42 in a217661

	export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
	stage,
	plugins,
	actions,
	}) => {
	if (
	stage !== `develop` &&
	stage !== `build-javascript` &&
	stage !== `build-html`
	) {
	return
	}
	actions.setWebpackConfig({
	plugins: [
	plugins.define({
	[`global.GATSBY___IMAGE`]: true,
	}),
	],
	})
	}

It might be the case that webpack 5 also removed the polyfill for global, we have a section on this in the migration doc: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#webpack-5-node-configuration-changed-nodefs-nodepath-

You might want to open an issue here: https://github.com/donavon/use-dark-mode

[kelvindecosta]

Hi!

Ah yes, I have tried adding node: { global: true } in the webpack configuration, but that doesn't seem to work.

[xmflsct]

I can confirm it is cased by gatsby-plugin-image.

[kelvindecosta]

Hey @LekoArts

I tried removing gatsby-plugin-image from the list of plugins in gatsby-config and the error disappears.
I am able to use gatsby-plugin-use-dark-mode perfectly now.
However, as a result of removing the image plugin, I've noticed some weird, but not surprising, behaviour.

I have a single GatsbyImage being rendered in a layout that is common to all pages (gatsby-plugin-layout).
During develop there are no issues with the image.
In the case of the built site, on the first visit, the image doesn't show.
It only starts to appear and stays when I navigate to another route.

I know that such behavior shouldn't be surprising since I am not using the plugin in the plugins array.
Still, I think this could be related to a different bug.
With the plugin configured properly and when changing to another route for the first time, the image in the common Layout will flash.
On inspecting the Network tab on DevTools, there seems to be an additional request being sent for this image.

Thank you again for your help with this matter.

[kelvindecosta]

I added gatsby-plugin-image in my plugins list and did some experimenting.

In my node_modules directory, I commented out the lines in gatsby-plugin-image/dist/gatsby-node.js:

// exports.onCreateBabelConfig = onCreateBabelConfig;
// var onCreateWebpackConfig = function (_a) {
//     var _b;
//     var stage = _a.stage, plugins = _a.plugins, actions = _a.actions;
//     if (stage !== "develop" &&
//         stage !== "build-javascript" &&
//         stage !== "build-html") {
//         return;
//     }
//     actions.setWebpackConfig({
//         plugins: [
//             plugins.define((_b = {},
//                 _b["global.GATSBY___IMAGE"] = true,
//                 _b)),
//         ]
//     });
// };
// exports.onCreateWebpackConfig = onCreateWebpackConfig;

I ran gatsby clean && gatsby build && gatsby serve.

Surprisingly, the error disappears.
I am able to use gatsby-plugin-use-dark-mode.

There is still a warning from gatsby-plugin-image telling me to add it to my plugins list for some optimizations.

There is definitely something weird with how the plugin adds to the webpack configuration.

[ognus]

Same issue. Hope it gets resolved, but for now I just "polyfilled" it myself in the gatsby-browser.js:

// gatsby-browser.js
window.global = window

After that gatsby-plugin-use-dark-mode and gatsby-plugin-image worked fine together.

[kelvindecosta]

Thanks for the workaround.

It's obviously not ideal but it helps for now.

[ognus]

yeah, it's horrible... but let me move forward for now 👍

[wKovacs64]

Hey all, author of gatsby-plugin-use-dark-mode here. 👋 Just to clarify , in case it helps with troubleshooting, I'm not using global in the plugin. The use of global comes from use-dark-mode here as well as at least one of its dependencies, @use-it/event-listener here, which is where the main functionality comes from (the plugin is just there to simplify usage with Gatsby).

What I'm not clear on is whether those need updated to not use global in order to be compatible with Gatsby v3 (webpack 5) or if something is broken on the Gatsby/webpack side. 🤔 At first I thought adding node: { global: true } to the webpack config should do it, as webpack 5 stopped doing that by default, but multiple people have reported that it doesn't help.

[kelvindecosta]

I did a little research and noticed that gatsby-plugin-image uses a global.GATSBY___IMAGE variable.
This would mean that using global in third party packages should not make them incompatible with Gatsby v3.

I think the issue lies in how global.GATSBY___IMAGE is defined.

// gatsby-plugin-image/dist/gatsby-node.js
exports.onCreateBabelConfig = onCreateBabelConfig;
var onCreateWebpackConfig = function (_a) {
    var _b;
    var stage = _a.stage, plugins = _a.plugins, actions = _a.actions;
    if (stage !== "develop" &&
        stage !== "build-javascript" &&
        stage !== "build-html") {
        return;
    }
    actions.setWebpackConfig({
        plugins: [
            plugins.define((_b = {},
                _b["global.GATSBY___IMAGE"] = true,
                _b)),
        ]
    });
};
exports.onCreateWebpackConfig = onCreateWebpackConfig;

[ascorbic]

Please try gatsby-plugin-image@1.2.1 which should resolve it

[Music47ell]

I just tested gatsby-plugin-image@1.2.1 with gatsby-plugin-use-dark-mode@1.3.0 and it works fine now with no error. Thank you @ascorbic

[kelvindecosta]

Yes, the update fixed the error!