Search code examples
javascriptsasswebpackuglifyjs

Webpack production build: BrowserslistError: Unknown version 55 of and_chr


I'm receiving this error whenever I try to run a production webpack build.

ERROR in ./~/css-loader!./~/sass-loader!./assets/src/css/nav.scss
Module build failed: BrowserslistError: Unknown version 55 of and_chr

After some trial and error, it looks like it's an issue related to the default UglifyJsPlugin. It will build correctly if it's removed, but it's also no longer a production build. I have googled for days now trying to find this issue anywhere and no one seems to have seen anything similar. The error above is repeated for every single one of my SASS files.

I'm pulling my hair out trying to solve this, and any help would be appreciated. Let me know what additional information you might need.

Here's a copy of my webpack production config:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {app: './assets/src/app.js', common: './assets/src/common.js'},
    devtool: 'cheap-module-source-map',
    output: {
        filename: './assets/build/[name].bundle.js',
    },
    watch: false,
    module: {
        loaders: [
            { test: /\.json$/, loader: "json-loader" },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react', 'stage-0']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style", "css-loader!sass-loader")
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: 'style-!css'
            }
        ],
    },
    plugins: [
        new ExtractTextPlugin('./assets/build/[name].css'),
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify('production')
          }
        }),
        new webpack.optimize.UglifyJsPlugin()
    ],
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ]
};

Solution

  • Sounds like you've got an outdated css-loader. Delete your node_modules and reinstall. That should fix it.