Envify not replacing my environment variables

Question

I'm having trouble with the Browserify Envify module in a universal React app.

I have the following feature toggle file:

export const featureToggles = {
  FEATURE_EXAMPLE: (process.env.FEATURE_EXAMPLE === 'true')
};

which in my Browserify output becomes

"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.featureToggles = void 0;const featureToggles = {
  FEATURE_EXAMPLE: process.env.FEATURE_EXAMPLE === 'true' };exports.featureToggles = featureToggles;

When I in my universal React app use featureToggles I get correct response from the server, but the client overwrites when hydrating. Resulting in new feature from server being replaced by old feature in client hydration.

My Browserify script looks like follows (this snippet will be repeated multiple times below with small changes based on what I tried):

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify(process.env))
    .bundle()
    .on('error', handleError)
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(globalSettings.production, stripDebug()))
    .pipe(gulpif(globalSettings.production, uglify()))
    .pipe(gulp.dest(taskSettings.scripts.dest));

I've tried replacing custom envify with normal (examples lacking in their readme):

const envify = require('envify');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify)
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

I've tried setting the variable explicit:

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify({FEATURE_EXAMPLE: 'please, something'})
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

I've tried purging:

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify({_: 'purge', FEATURE_EXAMPLE: 'please, something'})
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

I've tried running it globally:

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform({global: true}, envify({FEATURE_EXAMPLE: 'please, something'})
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

I've inherited the code, so I'm basically just fumbling around in the dark. Any help would be appreciated!

From what I understand from envify I expect the following output:

"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.featureToggles = void 0;const featureToggles = {
  FEATURE_EXAMPLE: 'true' === 'true' };exports.featureToggles = featureToggles;

If there's any help, my feature-toggles work locally, but not on my staging environment. It also did not work at first, when I looped through my features and reading process.env dynamically. Which would mean that envify at least does something?

Answer 1

The devil is in the details. As I said in my question, the problem only occurred on my staging (and probably prod) server. So after a while I came across app.json, a Heroku settings file, partly responsible for sending setting which environment variables should be set.

So adding "FEATURE_EXAMPLE": { "required": false} in "env": {} in my app.json fixed the problem.

I'm still curious about why I still see the variable in my dist folder instead of it being replaced.