Why does Webpack think I’m running a development build?

Question

This is an older project that will soon get some updates, but until then I need to use the original Webpack configs. The strange thing is this hasn’t been touched since the last release, yet there is a blocking issue.

When bundling for production and running in the browser, I get the following message:

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

It seems like Webpack thinks I’m running in development mode but using the minified React files, hence the message. I’ve traced all occurrences of process.env.NODE_ENV and they all log "production".

This is the build command that bundles the files:

node --max_old_space_size=3072 node_modules/.bin/webpack --verbose --colors --display-error-details --config webpack/prod.config.js

… and the Webpack configuration:

require('babel/polyfill');

// Webpack config for creating the production bundle.
const path = require('path');
const webpack = require('webpack');
const strip = require('strip-loader');

const projectRootPath = path.resolve(__dirname, '../');
const assetsPath = path.resolve(projectRootPath, './static/dist');

const webpackPostcssTools = require('webpack-postcss-tools');
const map = webpackPostcssTools.makeVarMap('./src/theme/index.css');

// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));

module.exports = {
    devtool: 'source-map',
    context: path.resolve(__dirname, '..'),
    entry: {
        'main': [
            './src/client.js'
        ]
    },
    output: {
        path: assetsPath,
        filename: '[name]-[chunkhash].js',
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/'
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
            { test: /\.json$/, loader: 'json-loader' },
            { test: /\.css$/, loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'] },
            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
            { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
            { test: /\.svg$/, loader: 'svg-inline' },
            { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10' },
            { test: /\.modernizrrc$/, loader: 'modernizr' }
        ]
    },
    progress: true,
    resolve: {
        alias: {
            font: __dirname + '/../src/fonts',
            images: __dirname + '/../static/images',
            modernizr$: path.resolve(__dirname, '../.modernizrrc')
        },
        modulesDirectories: [
            'src',
            'node_modules'
        ],
        extensions: ['', '.json', '.js', '.jsx']
    },
    postcss: () => {
        return [
            require('autoprefixer')({
                browsers: ['last 3 versions']
            }),
            require('precss'),
            require('postcss-custom-media')({
                extensions: map.media
            })
        ];
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'Scribe': 'scribe-editor'
        }),

        new webpack.DefinePlugin({
            __CLIENT__: true,
            __SERVER__: false,
            __DEVELOPMENT__: false,
            __DEVTOOLS__: false
        }),

        // ignore dev config
        new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),

        // set global vars
        new webpack.DefinePlugin({
            'process.env': {
                // Useful to reduce the size of client-side libraries, e.g. react
                NODE_ENV: JSON.stringify('production'),
                API_HOST: JSON.stringify(process.env.API_HOST || 'api'),
                WEB_HOST: JSON.stringify(process.env.WEB_HOST || 'https://www.website.com')
            }
        }),

        // optimizations
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),

        webpackIsomorphicToolsPlugin
    ]
};

I cannot seem to find the problem. Anything jump out that looks fishy?

I believe it is successfully building for "production." It's just warning you that the error information available in your browser's developer tools will be limited because some of the dev/debug information has been stripped out. Recreating the issue while using a development build will be more informative. — Jonathan Lonowski, Dec 02 '18 at 19:07

score 0 · Answer 1 · answered Dec 02 '18 at 19:06

0

Because your code is set to production, it's getting minified and you're getting that message.

Try setting it to development (i.e. NODE_ENV: JSON.stringify('development'))

React - Minified exception occurred

answered Dec 02 '18 at 19:06

Huy

10,806
13
55
99

But in production I _want_ the minified code. Do I just rely on Webpack to run the minification and _always_ use React’s unminified code? More importantly, I use `NODE_ENV === 'production'` in many places throughout the app. Why would I want to change the way this var is used just for React? – Brandon Durham Dec 02 '18 at 19:11

Why does Webpack think I’m running a development build?

1 Answers1