source-map breaking crypto-browserify on s3?

[paolavness]

Hi there,
I'm having the strangest issue here - my build runs and works fine on localhost. When uploading same build to s3, I am getting the error Uncaught TypeError: Cannot set property 'createCredentials' of undefined in _crypto-browserify/index.js_ line 94. This is happening in both firefox and chrome.

Changing devtools: 'source-map' to devtools: 'eval' resolves the issue (but is clearly not the solution).

Any help hugely appreciated.

Below is my webpack.config

const path = require('path');
console.log('> building', path.basename(__filename));

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('other.css');
const extractSCSS = new ExtractTextPlugin('style.css');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const S3Plugin = require('webpack-s3-plugin');

const dirApp = path.join(__dirname, 'src');
const dirAssets = path.join(__dirname, 'assets');

// ENV VARS
const NODE_ENV = process.env.NODE_ENV
	? process.env.NODE_ENV.toLowerCase()
	: 'development';

const ROLLBAR_VERSION = '2.0.4';

const VENDOR_LIBS = [
	'react',
	'react-dom',
	'react-redux',
	'react-router',
	'react-router-dom',
	'redux',
	'redux-form',
	'redux-promise',
	'redux-thunk'
];

module.exports = {
	entry: {
		bundle: path.join(dirApp, 'index.js'),
		vendor: VENDOR_LIBS
	},

	resolve: {
		modules: ['node_modules', dirAssets, dirApp],
		alias: {
			querystring: 'querystring-browser'
		}
	},

	devtool: 'source-map',  // Changing to 'eval' resolves the issue

	output: {
		path: path.join(__dirname, '/dist/'),
		pathinfo: true,
		publicPath: '/',
		filename: '[name].[chunkhash].js'
	},

	module: {
		rules: [
			// BABEL
			{
				test: /\.(js|jsx)$/,
				loader: 'babel-loader',
				exclude: /(node_modules)/,
				query: {
					plugins: [
						'lodash',
						'transform-object-rest-spread',
						'transform-class-properties',
						'transform-react-remove-prop-types'
					],
					presets: ['react', 'es2015']
				}
			},

			// STYLES
			{
				test: /\.css$/,
				use: extractCSS.extract(['css-loader'])
			},
			// CSS / SASS
			{
				test: /\.scss$/,
				use: extractSCSS.extract(['css-loader', 'sass-loader'])
			},

			// IMAGES
			{
				test: /\.(jpe*g|png|gif)$/,
				loader: 'url-loader',
				options: {
					name: '[path][name].[ext]',
					limit: 1
				}
			},

			// FONTS
			{
				test: /\.eot(\?v=\d+.\d+.\d+)?$/,
				loader: 'url-loader',
				options: {
					name: '[path][name].[ext]',
					limit: 10000
				}
			},
			{
				test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
				loader: 'url-loader',
				options: {
					name: '[path][name].[ext]',
					limit: 10000
					//&mimetype=application/font-woff
				}
			},
			{
				test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
				loader: 'url-loader',
				options: {
					name: '[path][name].[ext]',
					limit: 10000
					// ?limit=10000&mimetype=application/octet-stream
				}
			},
			{
				test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'url-loader',
				options: {
					name: '[path][name].[ext]',
					limit: 10000
					// ?limit=10000&mimetype=image/svg+xml
				}
			}
		]
	},

	plugins: [
		new LodashModuleReplacementPlugin({
			shorthands: true,
			collections: true,
			exotics: true,
			deburring: true,
			guards: true,
			flattening: true,
			paths: true
		}),

		extractCSS,
		extractSCSS,

		new webpack.optimize.CommonsChunkPlugin({
			names: ['vendor']
		}),

		new CopyWebpackPlugin([
			{ from: 'src/error.html' },
			{ from: 'src/cookiestest.html' },
			{ from: 'src/robots.txt' }
		]),

		new HtmlWebpackPlugin({
			template: 'src/index.html',
			title: 'DEV'
			environment: NODE_ENV,
			rollbar_version: ROLLBAR_VERSION,
			inject: 'body'
		}),

		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: JSON.stringify(NODE_ENV),
			}
		}),

		new webpack.LoaderOptionsPlugin({
			minimize: true,
			debug: true,
		}),
		new webpack.optimize.UglifyJsPlugin({
			beautify: false,
			mangle: {
				screw_ie8: true,
				keep_fnames: true
			},
			compress: {
				screw_ie8: true
			},
			comments: false,
			sourceMap: true
		})
	]
};

[paolavness]

This is fixed!
Removing -p from my build script did the trick:
webpack --progress --hide-modules

Manually setting production flags and manually uglifying and minimizing.

[Chonny Chu]

@paolavness you save my life, thank you so much