CSS Modules not pulling in localIdent name in prod builds

node v10.14.1 macOs v10.14.3 extract-css-chunks-webpack-plugin v4.0.1 css-loader v2.1.1 webpack v4.29.6 terser-webpack-plugin v1.2.3

Starting off: I just upgraded and tried out in local dev mode and HMR works again!! This is huge in keeping parity between local dev and stage/production styles (and render ordering).

That said currently my prod builds are producing javascript where all of my import classes from './file.scss'; return <div className={classes.someClass} />; (roughly speaking of course) result in ‘undefined’ classes on the elements.

I’ve confirmed prod builds are exactly the same, except:

1. The hot and reloadAll ExtractCssChunks.loader options are set to false in production
2. The new ExctactCssChunks(); has different file names between builds
3. Production builds obviously turn on optimization and minimization.

I can confirm that in prod the CSS file is built and included as expected, both dev and prod configurations use cacheGroups to generate a single css file, and dev users hot reloading/webpack-dev-server.

Swapping ExtractCssChunks with MiniCssExtract and leaving all set options, configuration, etc the same (literally just find-and-replace) fixes this issue in production builds.

My webpack configs can be found in this gist if it helps.

[dagda1]

all good in the hood for ssr also. Great work sir. I’m now going to look at the diff between 4.2 and 4.3!

[ScriptedAlchemy]

Haha! Only reason I maintain this, my hate for style loader. You don’t get an accurate reflection of production and style loader wrecks performance