React development build used when compiling for production

[aalwash]

Hi,

I'm not sure if this is an issue to mention here, just wanted to let other people know how to fix it. Maybe even add it to the package by default?

If you use React and do maba:webpack:compile --env=prod you will see this warning in your browser console log

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.

To fix this, you can modify this code:

/**
     * Build specific plugins - used only in production environment
     */
    if (BUILD) {
        config.plugins.push(
            /**
             * Only emit files when there are no errors
             * Reference: https://github.com/webpack/docs/wiki/list-of-plugins#noerrorsplugin
             */
            new webpack.NoEmitOnErrorsPlugin(),

            /**
             * Minify all javascript, switch loaders to minimizing mode
             * Reference: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
             */
            new webpack.optimize.UglifyJsPlugin()
        );
    }

To:

/**
     * Build specific plugins - used only in production environment
     */
    if (BUILD) {
        config.plugins.push(
            /**
             * Only emit files when there are no errors
             * Reference: https://github.com/webpack/docs/wiki/list-of-plugins#noerrorsplugin
             */
            new webpack.NoEmitOnErrorsPlugin(),

            /**
             * Minify all javascript, switch loaders to minimizing mode
             * Reference: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
             */
            new webpack.optimize.UglifyJsPlugin(),

            /**
             * Notify environment is production
             */
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': `"production"`
                }
            })
        );
    }

This will place the environment variable NODE_ENV on 'production' This way, the React package will make the code production-ready (which also means, the warning will disappear)

Some reference to read: https://facebook.github.io/react/docs/optimizing-performance.html#webpack

PS.: The environment variable is used by other npm packages as well, not only React

[PierreNansot]

Trying to solve the same problem with vuejs and this config doesn't work. MabaWebpack: 6.3 Webpack: 3.10

If someone could provide some insight