Error in node_modules: global is not defined #30609
Description
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