requiring ('dotenv') inside of gatsby-config.js breaks resulting in webpack error

[luiscmartinez]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Project builds successfully but as soon as I require dotenv inside of the gatsby-config.js file, I get a webpack error

ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'fs' in '/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that
the path is correct.
File: node_modules/dotenv/lib/main.js:24:11

ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'path' in '/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
If you're trying to use a package make sure that 'path' is installed. If you're trying to use a local file make sure that
the path is correct.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
File: node_modules/dotenv/lib/main.js:25:13
failed Re-building development bundle - 0.667s
success Writing page-data.json files to public directory - 0.002s - 0/1 465.94/s

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in
'/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
@ ./gatsby-config.js 4:0-24
@ ./src/pages/index.js 17:0-47 28:11-42
@ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5
@ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2

ERROR in ./node_modules/dotenv/lib/main.js 25:13-28
Module not found: Error: Can't resolve 'path' in
'/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./gatsby-config.js 4:0-24
@ ./src/pages/index.js 17:0-47 28:11-42
@ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5
@ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2
webpack compiled with 2 errors

Reproduction Link

https://github.com/luiscmartinez/gatsby-portfolio-1

Steps to Reproduce

1. npm i
2. npm run dev (runs gatsby develop)
3. add require('dotenv').config() to the top of the gatsby-config.js file
   ...
   After this you should get the webpack error

Expected Result

success Building development bundle - 5.648s

success Writing page-data.json files to public directory - 0.128s - 3/4 31.35/s

Actual Result

ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'fs' in '/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that
the path is correct.
File: node_modules/dotenv/lib/main.js:24:11

ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'path' in '/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
If you're trying to use a package make sure that 'path' is installed. If you're trying to use a local file make sure that
the path is correct.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
File: node_modules/dotenv/lib/main.js:25:13
failed Re-building development bundle - 0.667s
success Writing page-data.json files to public directory - 0.002s - 0/1 465.94/s

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in
'/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
@ ./gatsby-config.js 4:0-24
@ ./src/pages/index.js 17:0-47 28:11-42
@ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5
@ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2

ERROR in ./node_modules/dotenv/lib/main.js 25:13-28
Module not found: Error: Can't resolve 'path' in
'/Users/me/Codez/open-source/gatsby-portfolio-1/node_modules/dotenv/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./gatsby-config.js 4:0-24
@ ./src/pages/index.js 17:0-47 28:11-42
@ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5
@ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2
webpack compiled with 2 errors

Environment

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.3.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Firefox: 98.0.2
    Safari: 15.4
  npmPackages:
    gatsby: ^3.10.1 => 3.10.1
    gatsby-plugin-image: ^1.10.1 => 1.10.1
    gatsby-plugin-manifest: ^2.12.1 => 2.12.1
    gatsby-plugin-offline: ^3.10.2 => 3.10.2
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6
    gatsby-plugin-sharp: ^3.10.2 => 3.10.2
    gatsby-plugin-sitemap: ^5.10.2 => 5.10.2
    gatsby-source-filesystem: ^3.10.0 => 3.10.0
    gatsby-transformer-json: ^3.10.0 => 3.10.0
    gatsby-transformer-sharp: ^3.10.0 => 3.10.0

Config Flags

No response