CODEWITHSUNDEEP
herokuwebpackenvironment-variablesdotenv
Luïs
Luïs

Reputation: 2843

Heroku failed to load ./.env

My Problem

I am having trouble loading my environment variables on Heroku production. When pushing to Heroku I get following error message during the build script:

Failed to load ./.env.

Current Setup

I am using a .env file in the root of my app locally. I can succesfully load my environment variables using the dotenv-webpack plugin as follows:

//webpack.config

const Dotenv = require('dotenv-webpack')
module.exports = {
  // other settings...
  
  plugins: [
    new Dotenv(),
  ]
};

Loading the environment variables:

//server.js

require('dotenv').config();
console.log(process.env.MY_VARIABLE);

This works like a charm locally, but fails on Heroku.

Note: My config vars have been set on Heroku, so that's not the problem.

What I tried

I have already tried to force load the .env file from the root of my app like this:

new Dotenv({ path: path.resolve(__dirname, './.env') });

Someone also pointed out that the Heroku environment might be system wide environment variables so I tried to load them using:

new Dotenv({ systemVars: true });

Neither of these attempts worked for me.

My guess

I have noticed that Heroku saves their .env file under ./tmp/build_someRandomBuildId/.env. My guess is that the .env file is not on the root of the directory, hence why dotenv can't find it. There is also no way to hardcode the location of this file in my Webpack configuration as the build ID is randomized with every build. Is there a way to tell Webpack to look for the file in a dynamic location?

Upvotes: 3

Views: 13041

Answers (3)

Nicola Gaioni
Nicola Gaioni

Reputation: 178

Today i stumbled upon this problem, i tried several solutions but none worked. My App was working locally but in production mode (heroku) it was not loading process.env correctly.

then i found this https://www.npmjs.com/package/dotenv-webpack

//webpack.config.js
  plugins: [
      new Dotenv({ systemvars: true }),
  ],

Just setting systemvars to true does the trick.. For now I have tested this using different keys for the .env file and the heroku dashboard; They are not connected, and they replace themself correctly in production or dev mode.

Use the package "dotenv-webpack" instead of "dotenv".

I hope this saves some time to anyone facing the same problem

Upvotes: 8

Josh
Josh

Reputation: 6393

If you are not using Webpacks, the idea's solution is similar to the accepted answer. Heroku works on "production" mode by default, so if the problem in Heroku is with Dotenv (which should not be used anyways in Heroku), disable the use of Dotenv in production time like this:

if (process.env.NODE_ENV !== 'production') { 
   require('dotenv').config() }
}

...and then, access env variables just by doing:

var someVar = process.env.SOME_VARIABLE;

Don't forget to set the environment variables on Heroku first by using Console Commandline in your app's dashboard, or with an app.json file.

Upvotes: 1

Luïs
Luïs

Reputation: 2843

I finally found the solution, leaving this here for others who have the same problem as I did.

I used dotenv-webpack to set my environment variables locally, which worked like a charm. Heroku on the other hand sets their environment variables automatically, so there is no need to set them yourself. There is no need to look for a .env file. All I had to do was split up my webpack.config in 2 separate files.

//webpack.dev

require('dotenv').config();

plugins: [
  new Dotenv()
],

Load .env file locally.

//webpack.prod

require('dotenv').config();

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'YOUR_VARIABLE': JSON.stringify(process.env.YOUR_VARIABLE),
    }
  });
]

Get your environment variables from Heroku and write them to your own process.env

Upvotes: 4

Related Questions