JSS Not Minified in Production Build

[ArcadeRenegade]

Hello, I tried searching for a solution to this for several hours but couldn't find one.

In my production build, the JSS generated by Material UI is not minified and the class names are not turned into jss123. They stay as MuiButtonBase, MuiInputBase, etc.

This is happening on both server side render and client side render.

I am setting NODE_ENV=production explicitly during build and runtime. And when building with webpack I am specifying production mode.

I'm pretty sure this is a webpack issue but I'm at the end of my ropes on this one :(

• [x ] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

JSS is rendered in dev mode

Expected Behavior 🤔

JSS is rendered in production mode

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.8
React	v16.13.1
Browser	Chrome
Webpack	v4.42.1
etc.

Here are my webpack configs:

webpack.base.js:

// branch
const branch = process.env.BRANCH || 'development';

// path
const path = require('path');

// webpack
const webpack = require('webpack');

// webpack plugins
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	module: {
		rules: [
			{
				test: /\.(js|jsx)?$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			},
			// {
			// 	test: /\.(js|jsx)?$/,
			// 	include: [path.resolve(__dirname)],
			// 	use: {
			// 		loader: 'babel-loader',
			// 		options: {
			// 			presets: ['@babel/preset-env']
			// 		}
			// 	}
			// },
			{
				test: /\.(less)$/,
				exclude: /node_modules/,
				use: [
					MiniCssExtractPlugin.loader,
					{ loader: 'css-loader' },
					{
						loader: 'less-loader'
					}
				]
			},
			{
				test: /\.(svg|woff|woff2|eot|ttf|otf)$/,
				include: /paymentfont/,
				use: ['file-loader']
			}
		]
	},
	resolve: {
		modules: [
			path.resolve(__dirname),
			'node_modules'
		],
		extensions: ['.js', '.jsx', '.worker.js']
	},
	plugins: [
		new webpack.DefinePlugin({
			'__BRANCH__': JSON.stringify(branch)
		}),
		new MiniCssExtractPlugin({
			filename: 'styles.[contenthash].css',
			chunkFilename: 'styles.[contenthash].css'
		})
	]
};

webpack.client.base.js:

// branch
const branch = process.env.BRANCH || 'development';

// path
const path = require('path');

// webpack
const webpack = require('webpack');

// webpack plugins
const LoadablePlugin = require('@loadable/webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');

// settings
const OUTPUT_PATH = 'dist';

module.exports = {
	target: 'web',
	entry: {
		main: './client.js'
	},
	output: {
		path: path.resolve(__dirname, OUTPUT_PATH),
		publicPath: '/',
		filename: '[name].[contenthash].js',
		chunkFilename: 'chunk-[name].[contenthash].js'
	},
	optimization: {
		runtimeChunk: true,
		splitChunks: {
			chunks: 'all',
			maxAsyncRequests: Infinity,
			maxInitialRequests: Infinity,
			minChunks: 2,
			minSize: 10000
		}
	},
	plugins: [
		new webpack.DefinePlugin({
			'__SSR__': JSON.stringify(false)
		}),
		new LoadablePlugin({
			writeToDisk: {
				filename: path.resolve(__dirname, 'bin')
			}
		}),
		new webpack.IgnorePlugin({
			resourceRegExp: /^\.\/locale$/,
			contextRegExp: /moment$/
		}),
		new MomentTimezoneDataPlugin({
			matchZones: /^America\/.+$/
		}),
		new CopyWebpackPlugin([
			{
				from: path.resolve(__dirname, 'assets')
			},
			{
				from: path.resolve(__dirname, `assets.${branch}`)
			}
		]),
		new CleanWebpackPlugin({
			cleanStaleWebpackAssets: false,
			protectWebpackAssets: false,
			cleanOnceBeforeBuildPatterns: ['*']
		})
	]
};

webpack.client.production.js:

// webpack
const merge = require('webpack-merge');

// webpack plugins
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// base config
const baseConfig = require('./webpack.base.js');
const clientBaseConfig = require('./webpack.client.base.js');

const config = {
	mode: 'production',
	devtool: false,
	optimization: {
		minimizer: [
			new TerserPlugin({
				terserOptions: {
					ecma: 5,
					warnings: false,
					compress: {
						drop_console: true,
						drop_debugger: true
					},
					mangle: true,
					module: true,
					output: {
						comments: false
					},
					toplevel: true,
					ie8: false,
					safari10: false
				}
			}),
			new OptimizeCssAssetsPlugin({
				cssProcessorPluginOptions: {
					preset: ['default', { discardComments: { removeAll: true } }],
					region: 'us-west-2'
				}
			})
		]
	},
	plugins: [
		// uncomment this to analyze what is taking up space in webpack compilation
		// new BundleAnalyzerPlugin()
	]
};

module.exports = merge(baseConfig, clientBaseConfig, config);

webpack.server.base.js:

// path
const path = require('path');

// webpack
const webpack = require('webpack');

// webpack plugins
const NodeExternals = require('webpack-node-externals');
const LoadablePlugin = require('@loadable/webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// settings
const OUTPUT_PATH = 'bin';

module.exports = {
	target: 'node',
	entry: './server.js',
	output: {
		path: path.resolve(__dirname, OUTPUT_PATH),
		filename: 'server.js',
		chunkFilename: '[name].js'
	},
	externals: [NodeExternals()],
	plugins: [
		new webpack.DefinePlugin({
			'__SSR__': JSON.stringify(true)
		}),
		new LoadablePlugin({
			outputAsset: false,
			writeToDisk: false
		}),
		new CleanWebpackPlugin({
			cleanStaleWebpackAssets: false,
			protectWebpackAssets: false,
			cleanOnceBeforeBuildPatterns: ['*']
		})
	]
};

webpack.server.production.js:

// webpack
const webpack = require('webpack');
const merge = require('webpack-merge');

// base config
const baseConfig = require('./webpack.base.js');
const serverBaseConfig = require('./webpack.server.base.js');

const config = {
	mode: 'production',
	plugins: [
		new webpack.DefinePlugin({
			'__BUILD__': JSON.stringify('production')
		})
	]
};

module.exports = merge(baseConfig, serverBaseConfig, config);

[oliviertassinari]

Duplicate of #10068

[ArcadeRenegade]

i see. i used the gatsby material ui plugin before and thought the minification was built in.