Dotenv-webpack in production?

Question

I am trying to use the dotenv-webpack plugin. This works great locally. But fails when I deploy to Heroku.

I have followed advice according to this git issue, but still am having issues.

My webpack config looks like this:

const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  context: path.join(__dirname, '/src'),

  entry: {
    javascript: './js/index'
  },

output: {
  filename: 'bundle.js',
  path: path.join(__dirname, '/dist'),
},

resolve: {
  alias: {
    react: path.join(__dirname, 'node_modules', 'react')
  },
  extensions: ['.js', '.jsx'],
},

module: {
  rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ['babel-loader'],
  },
  {
    test: /\.html$/,
    loader: 'file?name=[name].[ext]',
  },
 ],
},
plugins: [
  new Dotenv({
    path: path.resolve(__dirname,'.env')
  }),
 ]
};

I am expecting that where the dotenv plugin is written as above, it will resolve my .env file (which is located at the root of the project, along with the webpack.config) upon build time, thus giving my project access to env vars. Instead, the env vars are undefined, in Heroku. I have an env var set in Heroku. The Key is set to something like SECRET_KEY. Value is set to something like 123456. Can anyone give me some insight?

Answer 1

I think you can set up a custom webpack plugin instead.

const path = require('path');
const webpack = require('webpack')
module.exports = {
  entry: './src/index.js',
  mode: 'production',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  node: {
    fs: 'empty'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
         'API_KEY': JSON.stringify(process.env.API_KEY)
      }
    })
  ]
};

Like these samples in your webpack.prod.js file.