Next.js Discord

Discord Forum

Mangle CSS on Latest version

Answered
Lazuee posted this in #help-forum
Open in Discord
LazueeOP
So, i have this code to mangle css but its only work on next@13.4.4
When I updated the version to 14.1.0, I got TypeError: Cannot set properties of undefined (setting 'getLocalIdent')

Does anyone have fixed version of this?
Answered by Lazuee
if (moduleLoader.loader?.includes("css-loader") && !moduleLoader.loader?.includes("postcss-loader")) { }

to
if ( moduleLoader.loader?.includes("css-loader") && !moduleLoader.loader?.includes("postcss-loader") && moduleLoader.options !== undefined && moduleLoader.options.modules !== undefined ) { }

the code seems works fine with next@14.x after updating the conditional..
View full answer

14 Replies

not-milo.tsx
General advice: Don't send code files. Instead provide the necessary information in the opening message so people can read through it immediately without having to download stuff that might not be safe.
- I've update the dependencies with pnpm update --latest
- Build the project with pnpm build
- Got the error.
LazueeOP
https://github.com/lazuee/next-starter/blob/master/next.config.js#L51-L61
^ this code seems not work on next@14.x..
How to mangle css with next@14.x?
not-milo.tsx
What are you trying to do that requires tinkering with the underlying webpack config?
LazueeOP
if (moduleLoader.loader?.includes("css-loader") && !moduleLoader.loader?.includes("postcss-loader")) { }

to
if ( moduleLoader.loader?.includes("css-loader") && !moduleLoader.loader?.includes("postcss-loader") && moduleLoader.options !== undefined && moduleLoader.options.modules !== undefined ) { }

the code seems works fine with next@14.x after updating the conditional..
Answer
not-milo.tsx
Yeah cause you're accessing it's properties safely. But my question still stands and I'm curious :thinq:
not-milo.tsx
Oh, but what difference in size is there with a minified Tailwind stylesheet? I never bothered to try and minify it since it doesn't seem to impact page load speeds
not-milo.tsx
Oooh, so you're scrambling and minifying so people can't just copy styles as easily