Redux NODE_ENV errors with Gulp/Browserify

Question

I'm getting this error message on a React/Redux app that is minified and packaged with Browserify and Gulp and deployed to Heroku.

bundle.js:39 You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux.

But it seems the build step is being done in NODE_ENV = 'production'.

I've a task that set the env variables like so

gulp.task('apply-prod-environment', function() {
  return process.env.NODE_ENV = 'production';
});

And the logs on Heroku show the ENV is production:

To guarantee the apply-prod-environment runs before the other tasks, I'm using RunSequence Gulp plugin.

gulp.task('buildProd', cb => {
  runSequence(
    'apply-prod-environment',
    'task-1',
    'task-2',
    'etc',
    cb
  );
});

EDIT
Second Try..

import envify from 'envify/custom';

function buildJS(sourceFile, {setEnv}) {
  return browserify(sourceFile)
    .transform(babelify, {
      presets: ['es2015', 'react', 'stage-2']
    })
    .transform(envify({
      NODE_ENV: setEnv
    }))
    .bundle()
    .on('error', (e) =>  {
      gutil.log(e);
    });
}

Still Getting same Error

Third Try..

function buildJS(sourceFile, {setEnv}) {
  return browserify(sourceFile)
    .transform(babelify, {
      presets: ['es2015', 'react', 'stage-2']
    })
    .transform(
      {global: true},
      envify({
        NODE_ENV: setEnv
      })
    )
    .bundle()
    .on('error', (e) =>  {
      gutil.log(e);
    });
}

Still Getting same Error

Possible duplicate of http://stackoverflow.com/questions/34479372/use-node-env-in-source-code-to-control-build-process-with-webpack — Monarch Wadia, Nov 30 '16 at 07:02

score 6 · Answer 1 · answered Nov 30 '16 at 07:02

6

I struggled with this same problem and I ended up using loose-envify to mock the environment variables that I wanted to override.

Then, my gulp task looked like this:

gulp.task('javascript:prod', function() {
return browserify("app/main.js", { debug: !IS_PROD })
    .transform("babelify", { presets: [ "es2015", "react" ], plugins: [ "transform-object-rest-spread", "transform-function-bind", "transform-object-assign" ] })
    .transform('loose-envify', { NODE_ENV: 'production' })
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest("./public/javascripts/"))
    .pipe(rev.manifest({merge:true, base: 'build/assets'}))
    .pipe(gulp.dest('build/assets'));
});

answered Nov 30 '16 at 07:02

Web Code Coach

226
2
5

Hmm. this is still not working. Is there anything else that needs to be set to fix? – GN. Nov 30 '16 at 20:03
I can't remember what I did because it was several months ago. Do you know if Heroku is running your 'buildProd' task as part of the build pack? Or are you running it locally and then pushing the pre-built files? – Web Code Coach Nov 30 '16 at 20:16
buildProd task is running on Heroku. Build log says it's running in 'production'. – GN. Nov 30 '16 at 23:31
A couple of questions... 1) Do you know which build pack you're using on Heroku? 2) Do you have Webpack, Babel and loaders listed in package.json under dependencies or devDependencies? I assume they're under dependencies since ReactJS is actually being compiled. My guess is that you either have something incorrect in your gulp file or the Heroku build pack is running the gulp task using a different ENV that not production. – Web Code Coach Dec 01 '16 at 04:34
Using Node buildpack. Using Gulp / Browserify not Webpack. Most dependencies are in dependencies not devDependencies so that we can run the build on Heroku (among other things like CI). – GN. Dec 01 '16 at 07:02

Redux NODE_ENV errors with Gulp/Browserify

1 Answers1

Linked