It's not working

[rico345100]

I'm using Browserify, and when I minified JS code with using React and Redux, it saids:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

So I added envify and used like this:

const vendors = [
	'connected-react-router', 
	'history', 
	'immutable', 
	'isomorphic-fetch', 
	'moment', 
	'react', 
	'react-dom', 
	'react-if', 
	'react-motion-ui-pack', 
	'react-redux', 
	'react-router', 
	'redux'
];
const isProduction = config.isProduction;

function buildVendor() {
	const b = persistify({ debug: !isProduction });

	vendors.forEach(vendor => {
		b.require(vendor);
	});

	if(isProduction) {
		console.log('envify');
		b.transform(envify({
			NODE_ENV: 'production'
		}));
	}

	let stream =  b.bundle()
	.on('error', swallowError)
	.pipe(source('vendor.js'))
	.pipe(buffer())
	.pipe(rename('vendor.js'));

	if(isProduction) {
		stream.pipe(uglify());
	}

	return stream.pipe(gulp.dest(`${DIST}/js`));
}

You can see that when it's production mode, it calls envify, also I printed "envify" on the console when it runs.

After run the browserify(with gulp), it saids 'envify':

[ec2-user@ip-172-31-22-2 modernator-2]$ gulp build --all
[11:58:05] Using gulpfile ~/modernator-2/gulpfile.js
[11:58:05] Starting 'build'...
envify    <-- ENVIFY CALLED
[11:58:05] Moving external resources done. (Time elapsed 27ms.)
[11:58:05] Building HTML done. (Time elapsed 431ms.)
[11:58:05] Compiling SCSS done. (Time elapsed 99ms.)
[11:58:06] 826520 bytes written (1.12 seconds)
[11:58:16] Moving images done. (Time elapsed 11007ms.)
[11:58:16] Finished 'build' after 11 s

But still same errors on the webbrowser's console:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

I'm running multiple node services on single server, so I can't set NODE_ENV to production, because some of them are still in development mode. Is there a something that I missed? Why it won't worked at all?

I'm using

• node v.6.9.5
• envify v4.0.0
• browserify v7.3.0

[kryten87]

FWIW I'm seeing the same thing with almost identical code. But I've noticed something else:

gulp mytask

Does not work, even when I have b.transform(envify({ NODE_ENV: 'production' })) in my pipeline

NODE_ENV=production gulp mytask

does work. It seems that envify is ignoring the NODE_ENV value specified.

[rico345100]

@Kryten0807 I solved this problem without using this, could be useful in your current situation. This is the code what am I did: https://github.com/rico345100/gulp-react-boilerplate/blob/master/gulpfile.js

Important thing is that when you bundling React with bundler, it checks process.NODE_ENV is production or not. So it's super easy with just add this simple line anywhere before bundle:

process.env.NODE_ENV = 'production';

It's now 100% working, without adding NODE_ENV=production in command line :)

[InvictusMB]

@rico345100
This works only because react contains envify (or loose-envify in recent versions) transform in package.json itself. Therefore browserify executes it and inlines env contents.
However it would not work for modules which are not configured that way.

The issue in the original post is caused by the fact that browserify does not run the transforms on node_modules contents.
100% solution to that would be to provide global flag with transform options to force the execution on all files.

b.transform(envify({
  NODE_ENV: 'production'
}), {
  global: true
});

[rico345100]

@InvictusMB That's a really good information, Thanks! I'm gonna try that.

[beck]

Correction to @InvictusMB, the config must come first:

browserify()
  .require(requirements)
  .transform({ global: true }, envify({NODE_ENV: 'production'}))
  .bundle()
  .pipe(output);

But ☝️ tripped me up because one must import envify/custom (not envify).

This also works:

const options = {
  transform: [
    ['envify', { NODE_ENV: 'production', global: true}]
  ],
};
browserify(options)
  .require(requirements)
  .bundle()
  .pipe(output);