How to access .env file variables in TypeScript using dotenv?

Question

I'm trying to use a .env file to store API keys in a TypeScript React project. My .env file is in the root of the project and I'm trying to access its variables from src/index.tsx via process.env.

.env:

FOO=foo

src/index.tsx:

import * as dotenv from "dotenv";

console.log(dotenv.config()); // prints TypeError: fs.readFileSync is not a function
console.log(process.env.FOO); // prints undefined

It looks like dotenv.config() throws in an error so I think that's where the problem is. Just not sure how to fix it. I've tried moving .env into the src directory and passing a path into the function, e.g. dotenv.config({ path: `${__dirname}/.env` }) but still getting the same error.

dotenv seems to be the most common way to use environment variables in a Node.js project, but if there are better alternatives I'd be interested in hearing those too.

Any thoughts & ideas would be appreciated.

jonchaf · Accepted Answer · 2020-11-06 17:26:48Z

1

Renaming the environment variable to REACT_APP_FOO and restarting react-scripts seems to do the trick. It works without calling dotenv.config(). Not really sure why it works this way so I would be interested to hear someone's insight on this.

answered Nov 6, 2020 at 17:26

jonchaf

1666 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farhad Azarbarzinniaz · Accepted Answer · 2020-11-06 17:26:57Z

0

You can access variables by first calling require('dotenv').config() at your project root. then you can use them like process.env.FOO.

You have to consider to call the process.env.FOO

answered Nov 6, 2020 at 17:26

Farhad Azarbarzinniaz

7394 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to access .env file variables in TypeScript using dotenv?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related