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

[pierreberchtold]

@luiscmartinez did you manage to find a solution? I'm trying to update my gatsby project and I am stuck with that dotenv error.

[luiscmartinez]

I haven't 😪
Still have an outdated portfolio since I couldn't move forward with the update I was trying to implement.
Any updates on your end? @pierreberchtold

[pierreberchtold]

I was same situation: not able to update an old project and move forward.
Now I tried following:

• npm install dotenv
• add require("dotenv").config() to gatsby-config.js
• remove require("dotenv").config() form other files

I'd say I have tried this before but this time it seems to work.

[friendglak]

Try install npm install dotenv

[luiscmartinez]

Theres no need to install dotenv because it is already installed with gatsby

[alex-major-digital]

I'm having this issue too - any resolutions yet?

[lautenschlager-dev]

Hi, this issue still presists. Is there any news about that? The offical documentation (https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/) still is telling us to require("dotenv"), whichs prodcues the fs error.

[adamicska]

Hi, also stuck with this error. Any updates?

Installing dotenv is not fixing this for me. Still getting webpack compile errors when importing dotenv in gatsby-config.

[falk-stefan]

Same thing here.

I'm unable to load a local config:

import type { GatsbyConfig } from "gatsby";

import dotenv from "dotenv";

dotenv.config({
  path: `.env.${process.env.NODE_ENV}`
});

Running with gatsby 5.13.2.