3.0.6 produces unexpected console.error in ie9

[sirreal]

After upgrading to [email protected], I'm seeing a new console.error in ie9.

A quick look suggests this was introduced by #1075

This causes my app to silently fail when no console is open. When I have the f12 console open I get the following error:

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.

Running the same code in modern browsers (chrome, firefox...) produces no console.error.

[sirreal]

The error message seems that ie9 is somehow mistakenly detecting that redux is being built minified, which I do not believe is the case.

Some more information about the builds in question. I am building with webpack. I have tried following the suggestions for setting NODE_ENV to "development", but the ie9 errors persist.

Some things I have tried with no success:

In my conditional build configuration:

// Webpack build config is conditionally loaded for prod or development:
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./webpack.config.website.prod.js')
} else {

  // adding this line does not help the ie9 errors:
  process.env.NODE_ENV = 'development'

  module.exports = require('./webpack.config.website.dev.js')
}

Adding it to DefinePlugin in webpack.config.website.dev.js as mentioned in the referenced SO answer also does not help ie9:

// ... config ...
new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"',
}),

Minimal config

Here is a minimal webpack config which still causes the error to be shown in ie9:

var webpack = require('webpack');
var path = require('path');

module.exports = {

  entry: {
    main: './js/website/main.js',
    'category-je-minforme': './js/website/category-informe.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'webroot/wp-content/themes/apr_main/js'),
    pathinfo: true,
  },

  plugins: [
    new webpack.ProvidePlugin({
      Promise: 'imports?this=>global!exports?global.Promise!es6-promise',
      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch',
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"',
      DEVELOPMENT: true,
      DEBUG: true,
    }),
  ],


  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'js'),
          path.resolve(__dirname, 'node_modules/qs'),
        ],
        loader: 'babel-loader',
        query: { cacheDirectory: './.babelCache' },
      },
    ],
  },
  debug: true,
  devtool: 'source-map',
}

.babelrc

In case it's relevant, here's my .babelrc. Unlikely the problem is here...

{
        "presets": ["es2015", "react"],
        "plugins": [
                "syntax-object-rest-spread",
                "transform-object-rest-spread",
                "transform-object-assign",
        ]
}

[gaearon]

Can you walk through the debugger and check why the warning is happening? What is mistaken in our assumptions?

[sirreal]

I just referenced a line that is behaving differently in ie9, which may be the cause for mistakenly thinking the code is minified:

run in chrome:

function foo(){}
foo.name === 'foo'
// true

run in ie9:

function foo(){}
foo.name === 'foo'
// false

[gaearon]

Should be fixed in 3.1.4.

[sirreal]

Thanks for the quick work. Commit b1bcee2 was likely sufficient to not crash the app when the console isn't open, which is really all I need for ie9 😄.

[gaearon]

Also, thanks for reporting!

[richardvaldiviesomacias]

Good evening: Question, I am not using webpack, but I am getting that error in Chrome. Could you please help me?

[gaearon]

@richardvaldiviesomacias What do you use to bundle CommonJS modules? You can only get this warning (it’s not technically an error) with CommonJS.

[richardvaldiviesomacias]

Thanks for your quick answer. I am using Browserify.

[gaearon]

Does the part of the warning related to browserify help?

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.

[richardvaldiviesomacias]

I notice that I have that package. Question, I have redux version 3.0.5 is that a problem?

[gaearon]

I’m not sure I understand what you are asking. If you see this warning, please make sure you envify Redux in production. Normally putting NODE_ENV=production before your browserify call should be enough for this. As a last resort you can use prebuilt UMD build in redux/dist/redux.min.js. It doesn’t need envification. I hope this helps.

[richardvaldiviesomacias]

Thanks @gaearon I will try your advice. This is my first big project using React and Redux, so still learning. Definitely became my libraries of choice.

[matejsvajger]

I'm using browserify with loose-envify transform after babel and I'm setting process.env.NODE_ENV = 'production'; before bundling modules and still get this warrning in all Browsers.

Tried also with envify package and setting NODE_ENV in global scope.

I'm on Redux 3.6.0.

Update:
logging process.env.NODE_ENV to browser console inside isCrushed dummy function returns undefined however logging process.env only it returns an Object{ NODE_ENV: 'production' }.

Obviously the envify passes in the environment var ok but I'm a bit confused as to what actually is happening here.

Update2:
Problem was, that process.env object in terminal was evaluated at real-time, when it actually wasn't yet populated before the isCrushed function was called. I was setting up the transforms for browserify incorrectly, so here's a solution:

Instead of setting up the transforms for browserify by passing in the array of transform functions pass them as arrays of functions and envify/loose-envify transform as a string with options:

browserify({transform:[
          [babelify],
          ['envify', {NODE_ENV:'production'}],
          [resolvify]
]})

The documentation how to properly format the transform option for browserfiy to be able to pass in options to transforms is very sparse thus I'm dropping this here for anyone that may stumble upon it.

[mrdulin]

I found this code within node_modules/redux/dist/redux.js:

if (("development") !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
	  (0, _warning2['default'])('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.');
	}

obviously, the point is ("development") !== 'production', I don't know why. Anyone can explain it? I think it should be process.env.NODE_ENV !== 'production'.

[markerikson]

@mrdulin : that's the output of the build process, after process.env.NODE_ENV has been replaced with another value. I've got an article here that explains what's going on: http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/ .

[mrdulin]

@markerikson Thanks. So, my webpack config alias maybe:

redux: path.join(nodeModulePath, env === 'development' ? `redux/dist/redux.js` : 'redux/dist/redux.min.js'),

?