angular-redux / ng-redux

Angular bindings for Redux
MIT License
1.16k stars 177 forks source link

Minified Redux version not used in production build #156

Closed maxlapides closed 7 years ago

maxlapides commented 7 years ago

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?

AntJanus commented 7 years ago

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 7 years ago

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

Also how are you including the library?

maxlapides commented 7 years ago

@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 7 years ago

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