angular-redux/ng-redux

Minified Redux version not used in production build

maxlapides opened this issue · 4 comments

I am using webpack to build my project that uses ng-redux. After upgrading to 3.5.0, I am seeing this message in my JavaScript console:

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.

After downgrading to 3.4.1, this message goes away. Any ideas what's going on here?

Thanks for bringing this up. 3.4.1 set the production environment and it was overwritten by a PR I merged in. I'll release a patch that corrects this.

deini commented

@maxlapides Can you share the repo or create a small repo reproducing this?

Also how are you including the library?

@deini Unfortunately, the project is closed source. But, here's my webpack config:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  context: __dirname,
  entry: ['babel-polyfill', path.resolve(__dirname, 'app/index.js')],
  output: {
    filename: 'bundle-[name].min.js',
    publicPath: '',
    path: path.resolve(__dirname, './public')
  },
  resolve: {
    modules: ['node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      },
      {
        test: /\.html$/,
        include: [path.join(__dirname, './app')],
        use: [
          {
            loader: 'ngtemplate-loader',
            options: {
              relativeTo: 'app'
            }
          },
          {
            loader: 'html-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'postcss-loader'
            }
          ]
        })
      },
      {
        test: require.resolve('angular'),
        loader: 'exports-loader',
        options: 'window.angular'
      }
    ]
  },
  plugins: [
    // force Angular to use jQuery instead of jqLite
    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery'
    }),
    
    new webpack.optimize.ModuleConcatenationPlugin(),

    new HtmlWebpackPlugin({
      template: './index.html',
      inject: 'body',
      hash: true,
      minify: {
        removeComments: true,
        removeCommentsFromCDATA: true,
        removeCDATASectionsFromCDATA: true,
        collapseWhitespace: true
      },
      vars: {
        year: new Date().getFullYear()
      }
    }),

    // https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),

    new webpack.optimize.UglifyJsPlugin({
      mangle: {
        except: ['$super', '$', 'exports', 'require', 'angular']
      },
      compress: {
        warnings: false
      },
      comments: false
    }),

    new ExtractTextPlugin({
      filename: 'styles-[name].css',
      disable: false,
      allChunks: true
    })
  ]
}

I am following the instructions in the README to include $ngReduxProvider

deini commented

Thanks @maxlapides I was able to reproduce it, looking into it now 👀