Error in node_modules: global is not defined

[stephan-swiftcom]

Description

Since upgrading to Gatsby V3 and using the new gatsby-plugin-image, some of my node packages throw an exception in the browser with global is not defined

The following ones confirmed, but others have had the same issue:
voca
reaptcha

Steps to reproduce

Create a new gatsby site with gatsby-starter-default
Update gatsby, gatsby-plugin-image and gatsby-plugin-sharp to the latest versions

At time of writing:

gatsby: ^3.2.0 => 3.2.0
gatsby-plugin-image: ^1.2.0 => 1.2.0
gatsby-plugin-sharp: ^3.2.0 => 3.2.0

Run npm install voca

In index.js add:

import voca from "voca"
console.log(voca.kebabCase("goodbye blue sky"))

Run npm run develop
Open localhost:8000 and the error should appear

I can create a reproduction if necessary but the example is pretty straghtforward

Expected result

Packages should work as they did in Gatsby V2

Actual result

Exception is thrown in the browser, usually to the tune of

Error in function eval in: ./node_modules/xxxx global is not defined.

I suspect this is due to a change in webpack v5, where somehow the target messes up the globals leaving the package in state where it thinks it's running in Node, but is in fact not.

It is especially strange in vocajs, as the exception is thrown in this line:

    if (typeof global === 'object' && global.Object === Object) {
        // NodeJS global object
 >    globalObject$1 = global;

I have no idea how it even gets into that if statement.

Any leads would be appreciated as I would desperately like to use the new gatsby-plugin-image in our project

Environment

System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i5-7300U CPU @ 2.60GHz
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
Languages:
Python: 2.7.18 - /usr/bin/python
Browsers:
Chrome: 89.0.4389.114
Firefox: 87.0
npmPackages:
gatsby: ^3.0.4 => 3.0.4
gatsby-background-image: ^1.4.1 => 1.4.1
gatsby-cli: ^3.0.0 => 3.0.0
gatsby-image: ^3.0.0 => 3.0.0
gatsby-plugin-disqus: ^1.2.0 => 1.2.2
gatsby-plugin-google-analytics: ^3.0.0 => 3.0.0
gatsby-plugin-google-gtag: ^3.0.0 => 3.0.0
gatsby-plugin-manifest: ^3.0.0 => 3.0.0
gatsby-plugin-nprogress: ^3.0.0 => 3.0.0
gatsby-plugin-offline: ^4.0.0 => 4.0.0
gatsby-plugin-preconnect: ^1.2.0 => 1.2.0
gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
gatsby-plugin-remove-console: 0.0.2 => 0.0.2
gatsby-plugin-sharp: ^3.0.1 => 3.0.1
gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
gatsby-plugin-styled-components: ^4.0.0 => 4.0.0
gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1
gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.21 => 1.1.21
gatsby-source-filesystem: ^3.0.0 => 3.0.0
gatsby-source-graphql: ^3.0.0 => 3.0.0
gatsby-source-woocommerce: ^0.2.0 => 0.2.0
gatsby-source-wordpress: ^5.0.0 => 5.0.0
gatsby-transformer-json: ^3.0.0 => 3.0.0
gatsby-transformer-sharp: ^3.0.0 => 3.0.0
npmGlobalPackages:
gatsby-cli: 3.2.0

[stevepepple]

I'm also seeing this error, after upgrading gatsby-plugin-image:

System:
OS: macOS 11.2.3
CPU: (8) x64 Apple M1
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.15.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 89.0.4389.90
Firefox: 87.0
Safari: 14.0.3
npmPackages:
gatsby: ^3.3.0-next.1 => 3.3.0-next.1
gatsby-background-image: ^1.5.0 => 1.5.0
gatsby-cli: ^3.0.0 => 3.2.0
gatsby-gravityforms-component: ^3.1.0 => 3.1.0
gatsby-image: ^3.3.0-next.0 => 3.3.0-next.0
gatsby-plugin-build-date: ^1.0.0 => 1.0.0
gatsby-plugin-bundle-stats: ^2.6.0 => 2.8.0
gatsby-plugin-client-side-redirect: ^1.1.0 => 1.1.0
gatsby-plugin-facebook-pixel: ^1.0.5 => 1.0.5
gatsby-plugin-feed: ^3.0.0 => 3.2.0
gatsby-plugin-google-analytics: ^3.0.0 => 3.2.0
gatsby-plugin-google-tagmanager: ^3.0.0 => 3.2.0
gatsby-plugin-image: ^1.2.0 => 1.2.0
gatsby-plugin-loadable-components-ssr: ^2.1.0 => 2.1.0
gatsby-plugin-manifest: ^3.0.0 => 3.2.0
gatsby-plugin-netlify: ^3.3.0-next.0 => 3.3.0-next.0
gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0
gatsby-plugin-react-helmet: ^4.0.0 => 4.2.0
gatsby-plugin-react-helmet-canonical-urls: ^1.4.0 => 1.4.0
gatsby-plugin-react-i18next: ^1.1.1 => 1.1.1
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0
gatsby-plugin-robots-txt: ^1.5.1 => 1.5.5
gatsby-plugin-sass: ^4.0.0 => 4.2.0
gatsby-plugin-sass-resources: ^2.0.0 => 2.0.0
gatsby-plugin-sharp: ^3.3.0-next.1 => 3.3.0-next.1
gatsby-plugin-sitemap: ^3.0.0 => 3.2.0
gatsby-plugin-split-css: ^2.0.0 => 2.0.0
gatsby-plugin-transition-link: ^1.18.0 => 1.20.5
gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5
gatsby-source-filesystem: ^3.2.0 => 3.2.0
gatsby-source-gravityforms: ^1.0.15 => 1.0.17
gatsby-source-wordpress: 5.3.0-next.0 => 5.3.0-next.0
gatsby-transformer-sharp: ^3.2.0 => 3.2.0
npmGlobalPackages:
gatsby-cli: 3.3.0-next.0

[ascorbic]

Hi,
Can you both confirm that you have added "gatsby-plugin-image" to your gatsby-config?

[stephan-swiftcom]

Can confirm, gatsby-plugin-image is added in gatsby-config.

I see there is an open pull request to fix this issue. Apparently gatsby-plugin-image needs a proper webpack configuration otherwise it breaks packages that rely on the global variable

[stevepepple]

Ah good find @stephan-swiftcom!
I can also confirm that gatsby-plugin-image is added in gatsby-config

[ascorbic]

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