Should 'fs' be included explicitly as a dependency?

[DavidSabine]

• I'm submitting a ... [X ] bug report [ ] feature request [X ] question about the decisions made in the repository [ ] question about how to use this project

• Summary

Given that I have a fully-operational Gatsby site (e.g. gatsby develop compiles my code and I can navigate the site at localhost:8000) and given the info in the Readme, I should be able to:

1) npm install gatsby-plugin-config dotenv -S 2) place this in gatsby-config.js: require('dotenv').config({path: .env.${process.env.NODE_ENV}}); 3) add a file in the same folder as Gatsby-config.js called .env.development with contents such as: GATSBY_SECRETKEY=my_secret 4) then run gatsby develop again.

However, following those exact steps, I get a 'failed to compile' message, specifically: This dependency was not found: fs in ./node_modules/dotenv/lib/main.js

I've then tried including fs as an explicit dependency, as in: npm install fs --save, but the problem persists.

It's not clear to me whether this is a problem with webpack or with dotenv. It's probably important to mention I started with the vanilla 'hello world' Gatsby starter -- that's important because the webpack config is not exposed to me directly and this issue might be related to this. If so, should we dig into node_modules and alter the webpack config? or should we add detail to gatsby-config.js for this plugin and for webpack?

Also, I'm not suggesting this is a problem with this plugin -- but if it's a known issue, I suggest adding some info the Readme would be most helpful.

---

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

---

(Details from shell window)

This dependency was not found:

• fs in ./node_modules/dotenv/lib/main.js

To install it, you can run: npm install --save fs × ｢wdm｣: ERROR in ./node_modules/dotenv/lib/main.js Module not found: Error: Can't resolve 'fs' in 'C:\Users\david\Documents\GitHub\gatsby-starter\node_modules\dotenv\lib' @ ./node_modules/dotenv/lib/main.js 24:11-24 @ ./gatsby-config.js @ ./src/components/htmlhead.js @ ./src/pages/404.js @ ./.cache/sync-requires.js @ ./.cache/app.js @ multi (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false C://Users//david//Documents//GitHub//gatsby-starter//.cache//app i ｢wdm｣: Failed to compile.

[aamorozov]

I just got the same error when tried requiring dotenv from the component directly - it was fixed, however, after I'd moved the env require to gatsby-config.js @birkir

[birkir]

Yes, the require('dotenv').config(...) must be placed in gatsby-config.js only. It is a nodejs only thing and will not work in the browser.

[DavidSabine]

I'm writing this, not to dissuade people from using dotenv or gatsby-plugin-config, but to share an alternative for some...

I've had no trouble using cross-env in my Gatsby sites.

Keep in mind my particular use case before considering 'cross-env' a total replacement for 'dotenv' and this Gatsby plugin. Basically, when building a Gatsby site on my local (windows) computer, I want a particular variable available to Gatsby via the command line. It turns out I don't need all the functionality made available by dotenv and this Gatsby plugin. 'cross-env' has been a great alternative approach for me.

[birkir]

Sure, if thats your use-case, sounds good.

a) Reason for using this plugin is to normalize environment variables. That means, empty string variables are treated as falsy value. It also strips the required GATSBY_ prefix to pass them into the client state. b) dotenv is a great tool to read variables from a file. You don't want to check in environment variables to your git repository as its considered a bad practice and can be a security threat. c) cross-env has nothing to do with this plugin or dotenv. It is not a replacement for dotenv, and functionally, it can't.

[liviu-marciu]

Besides all the steps mentioned in the initial post, adding

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    node: { fs: 'empty' },
})
}

to gatsby-node.js fixed it for me.

[DavidSabine]

@liviu-marciu said:

Besides all the steps mentioned in the initial post, adding

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    node: { fs: 'empty' },
})
}

to gatsby-node.js fixed it for me.

@birkir, Do you approve of this approach? Would it make sense to add this info to the ReadMe?

[jonnyeom]

I agree that this should be addressed. Using environment variables is a common thing and the default documentation at https://www.gatsbyjs.org/docs/environment-variables/#server-side-nodejs is not enough for most starter environments. You need to add the code @liviu-marciu mentioned for it to work.

I think we should add it to the documentation for the time being until the fs configuration is resolved.

Thoughts?

[hotcakedev628]

I am developing static eCommerce website using Nacelle-gatsby.

Still getting this issue.

https://github.com/getnacelle/nacelle-react/blob/main/examples/gatsby/src/services/nacelle.js

Please check and let me know how to fix it.