Latest version error @ NextJS 14.2.4
I started getting this error on build:
unhandledRejection CssSyntaxError: /home/source/next/app/globals.css:1:1: Unknown word
at Input.error (/home/source/next/node_modules/postcss/lib/input.js:106:16)
at Parser.unknownWord (/home/source/next/node_modules/postcss/lib/parser.js:593:22)
at Parser.other (/home/source/next/node_modules/postcss/lib/parser.js:435:12)
at Parser.parse (/home/source/next/node_modules/postcss/lib/parser.js:470:16)
at parse (/home/source/next/node_modules/postcss/lib/parse.js:11:12)
at LazyResult (/home/source/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/home/source/next/node_modules/postcss/lib/processor.js:53:14)
at cssHandler (file:///home/source/next/node_modules/@tailwindcss-mangle/core/dist/index.mjs:247:61)
at Object.transform (file:///home/source/next/node_modules/unplugin-tailwindcss-mangle/dist/index.mjs:40:24)
at Object.transform (/home/source/next/node_modules/unplugin/dist/webpack/loaders/transform.js:108:38)
at LOADER_EXECUTION (/home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4134)
at runSyncOrAsync (/home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4145)
at iterateNormalLoaders (/home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782)
at iterateNormalLoaders (/home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5650)
at /home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5879
at runSyncOrAsync (/home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4293)
at iterateNormalLoaders (/home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782)
at /home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5142
at r.callback (/home/source/next/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4039)
at handleExports (/home/source/next/node_modules/next/dist/compiled/mini-css-extract-plugin/loader.js:1:6828)
at /home/source/next/node_modules/next/dist/compiled/mini-css-extract-plugin/loader.js:1:7646
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:821142
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:131690
at symbolIterator (/home/source/next/node_modules/next/dist/compiled/neo-async/async.js:1:14444)
at timesSync (/home/source/next/node_modules/next/dist/compiled/neo-async/async.js:1:5027)
at Object.eachLimit (/home/source/next/node_modules/next/dist/compiled/neo-async/async.js:1:14208)
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:129889
at symbolIterator (/home/source/next/node_modules/next/dist/compiled/neo-async/async.js:1:14444)
at done (/home/source/next/node_modules/next/dist/compiled/neo-async/async.js:1:14824)
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:129140
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:109939
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:312825
at _done (eval at create (/home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:9:1)
at Hook.eval [as callAsync] (eval at create (/home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:39:22)
at Cache.store (/home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:16097)
at ItemCacheFacade.store (/home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:17341)
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:109926
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:15962
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:15523
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:539171
at /home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:28:15992
at eval (eval at create (/home/source/next/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:30:1)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at runNextTicks (node:internal/process/task_queues:64:3)
at process.processImmediate (node:internal/timers:449:9) {
reason: 'Unknown word',
file: '/home/source/next/app/globals.css',
source: '// extracted by mini-css-extract-plugin',
line: 1,
column: 1,
endLine: 1,
endColumn: 3,
input: {
column: 1,
endColumn: 3,
endLine: 1,
line: 1,
source: '// extracted by mini-css-extract-plugin',
url: 'file:///home/source/next/app/globals.css',
file: '/home/source/next/app/globals.css'
}
}
Hi nickimbo: Currently, it appears that version 3.0 only supports Vite. More frameworks will be supported in the future, and this issue will be continuously tracked.
Add nextjs support at [email protected], you could have a try.
Giving it a try right now.
Failed to compile.
./app/globals.css
Module not found: Can't resolve 'text-red-800":{"name":"inju-build-339-fh","usedBy":{}},"dark:from-zinc-900":{"name":"inju-build-339-gh","usedBy":{}},"dark:text-blue-500":{"name":"inju-build-339-hh","usedBy":{}},"focus:outline-none":{"name":"inju-build-339-ih","usedBy":{}},"focus:ring-red-500":{"name":"inju-build-339-jh","usedBy":{}},"group-hover:hidden":{"name":"inju-build-339-kh","usedBy":{}},"hover:bg-secondary":{"name":"inju-build-339-lh","usedBy":{}},"hover:text-primary":{"name":"inju-build-339-mh","usedBy":{}},"place-items-center":{"name":"inju-build-339-nh","usedBy":{}},"text-foreground/50":{"name":"inju-build-339-oh","usedBy":{}},"text-foreground/90":{"name":"inju-build-339-ph","usedBy":{}},"transition-opacity":{"name":"inju-build-339-qh","usedBy":{}},"translate-x-[-50%]":{"name":"inju-build-339-rh","usedBy":{}},"translate-y-[-50%]":{"name":"inju-build-339-sh","usedBy":{}},"underline-offset-4":{"name":"inju-build-339-th","usedBy":{}},"'
https://nextjs.org/docs/messages/module-not-found
./app/globals.css
Module not found: Module not found: Error: Can't resolve 'text-red-800":{"name":"inju-build-339-fh","usedBy":{}},"dark:from-zinc-900":{"name":"inju-build-339-gh","usedBy":{}},"dark:text-blue-500":{"name":"inju-build-339-hh","usedBy":{}},"focus:outline-none":{"name":"inju-build-339-ih","usedBy":{}},"focus:ring-red-500":{"name":"inju-build-339-jh","usedBy":{}},"group-hover:hidden":{"name":"inju-build-339-kh","usedBy":{}},"hover:bg-secondary":{"name":"inju-build-339-lh","usedBy":{}},"hover:text-primary":{"name":"inju-build-339-mh","usedBy":{}},"place-items-center":{"name":"inju-build-339-nh","usedBy":{}},"text-foreground/50":{"name":"inju-build-339-oh","usedBy":{}},"text-foreground/90":{"name":"inju-build-339-ph","usedBy":{}},"transition-opacity":{"name":"inju-build-339-qh","usedBy":{}},"translate-x-[-50%]":{"name":"inju-build-339-rh","usedBy":{}},"translate-y-[-50%]":{"name":"inju-build-339-sh","usedBy":{}},"underline-offset-4":{"name":"inju-build-339-th","usedBy":{}},"'
https://nextjs.org/docs/messages/module-not-found
> Build failed because of webpack errors
Can you provide me with a reproducible case? I would be very grateful.
me too @sonofmagic
The second time I come back with this plugin in nextjs, also not working but different error :D .
Keep it up.
./src/styles/globals.css
Module not found: Can't resolve 'p-[var(--mega-body-padding)]":{"name":"tw-id","usedBy":{}},"[&_[cmdk-group-heading]]:px-2":{"name":"tw-jd","usedBy":{}},"after:transition-[background]":{"name":"tw-kd","usedBy":{}},"before:dark:bg-gradient-to-br":{"name":"tw-ld","usedBy":{}},"before:shadow-mega-primary/40":{"name":"tw-md","usedBy":{}},"before:shadow-mega-primary/80":{"name":"tw-nd","usedBy":{}},"data-[state=closed]:ease-vaul":{"name":"tw-od","usedBy":{}},"data-[state=open]:blur-in-2xl":{"name":"tw-pd","usedBy":{}},"data-[state=open]:zoom-in-125":{"name":"tw-qd","usedBy":{}},"data-align=start:duration-400":{"name":"tw-rd","usedBy":{}},"data-disabled=true:opacity-50":{"name":"tw-sd","usedBy":{}},"data-state=closed:animate-out":{"name":"tw-td","usedBy":{}},"data-state=closed:zoom-out-95":{"name":"tw-ud","usedBy":{}},"hover:after:dark:to-[#0065FF]":{"name":"tw-vd","usedBy":{}},"hover:before:bg-purple-500/20":{"name":"tw-wd","usedBy":{}},"hover:before:bg-yellow-500/20":{"name":"tw-xd","usedBy":{}},"hover:text-mega-secondary/100":{"name":"tw-yd","usedBy":{}},"selection:text-mega-secondary":{"name":"tw-zd","usedBy":{}},"transition-[background-color]":{"name":"tw-ae","usedBy":{}},"after:dark:bg-gradient-to-br":{"name":"tw-be","usedBy":{}},"before:'
https://nextjs.org/docs/messages/module-not-found
./src/styles/globals.css
Module not found: Module not found: Error: Can't resolve 'p-[var(--mega-body-padding)]":{"name":"tw-id","usedBy":{}},"[&_[cmdk-group-heading]]:px-2":{"name":"tw-jd","usedBy":{}},"after:transition-[background]":{"name":"tw-kd","usedBy":{}},"before:dark:bg-gradient-to-br":{"name":"tw-ld","usedBy":{}},"before:shadow-mega-primary/40":{"name":"tw-md","usedBy":{}},"before:shadow-mega-primary/80":{"name":"tw-nd","usedBy":{}},"data-[state=closed]:ease-vaul":{"name":"tw-od","usedBy":{}},"data-[state=open]:blur-in-2xl":{"name":"tw-pd","usedBy":{}},"data-[state=open]:zoom-in-125":{"name":"tw-qd","usedBy":{}},"data-align=start:duration-400":{"name":"tw-rd","usedBy":{}},"data-disabled=true:opacity-50":{"name":"tw-sd","usedBy":{}},"data-state=closed:animate-out":{"name":"tw-td","usedBy":{}},"data-state=closed:zoom-out-95":{"name":"tw-ud","usedBy":{}},"hover:after:dark:to-[#0065FF]":{"name":"tw-vd","usedBy":{}},"hover:before:bg-purple-500/20":{"name":"tw-wd","usedBy":{}},"hover:before:bg-yellow-500/20":{"name":"tw-xd","usedBy":{}},"hover:text-mega-secondary/100":{"name":"tw-yd","usedBy":{}},"selection:text-mega-secondary":{"name":"tw-zd","usedBy":{}},"transition-[background-color]":{"name":"tw-ae","usedBy":{}},"after:dark:bg-gradient-to-br":{"name":"tw-be","usedBy":{}},"before:'
https://nextjs.org/docs/messages/module-not-found
./src/styles/overlay-scrollbar.css
Module not found: Can't resolve 'p-[var(--mega-body-padding)]":{"name":"tw-id","usedBy":{}},"[&_[cmdk-group-heading]]:px-2":{"name":"tw-jd","usedBy":{}},"after:transition-[background]":{"name":"tw-kd","usedBy":{}},"before:dark:bg-gradient-to-br":{"name":"tw-ld","usedBy":{}},"before:shadow-mega-primary/40":{"name":"tw-md","usedBy":{}},"before:shadow-mega-primary/80":{"name":"tw-nd","usedBy":{}},"data-[state=closed]:ease-vaul":{"name":"tw-od","usedBy":{}},"data-[state=open]:blur-in-2xl":{"name":"tw-pd","usedBy":{}},"data-[state=open]:zoom-in-125":{"name":"tw-qd","usedBy":{}},"data-align=start:duration-400":{"name":"tw-rd","usedBy":{}},"data-disabled=true:opacity-50":{"name":"tw-sd","usedBy":{}},"data-state=closed:animate-out":{"name":"tw-td","usedBy":{}},"data-state=closed:zoom-out-95":{"name":"tw-ud","usedBy":{}},"hover:after:dark:to-[#0065FF]":{"name":"tw-vd","usedBy":{}},"hover:before:bg-purple-500/20":{"name":"tw-wd","usedBy":{}},"hover:before:bg-yellow-500/20":{"name":"tw-xd","usedBy":{}},"hover:text-mega-secondary/100":{"name":"tw-yd","usedBy":{}},"selection:text-mega-secondary":{"name":"tw-zd","usedBy":{}},"transition-[background-color]":{"name":"tw-ae","usedBy":{}},"after:dark:bg-gradient-to-br":{"name":"tw-be","usedBy":{}},"before:'
https://nextjs.org/docs/messages/module-not-found
./src/styles/overlay-scrollbar.css
Module not found: Module not found: Error: Can't resolve 'p-[var(--mega-body-padding)]":{"name":"tw-id","usedBy":{}},"[&_[cmdk-group-heading]]:px-2":{"name":"tw-jd","usedBy":{}},"after:transition-[background]":{"name":"tw-kd","usedBy":{}},"before:dark:bg-gradient-to-br":{"name":"tw-ld","usedBy":{}},"before:shadow-mega-primary/40":{"name":"tw-md","usedBy":{}},"before:shadow-mega-primary/80":{"name":"tw-nd","usedBy":{}},"data-[state=closed]:ease-vaul":{"name":"tw-od","usedBy":{}},"data-[state=open]:blur-in-2xl":{"name":"tw-pd","usedBy":{}},"data-[state=open]:zoom-in-125":{"name":"tw-qd","usedBy":{}},"data-align=start:duration-400":{"name":"tw-rd","usedBy":{}},"data-disabled=true:opacity-50":{"name":"tw-sd","usedBy":{}},"data-state=closed:animate-out":{"name":"tw-td","usedBy":{}},"data-state=closed:zoom-out-95":{"name":"tw-ud","usedBy":{}},"hover:after:dark:to-[#0065FF]":{"name":"tw-vd","usedBy":{}},"hover:before:bg-purple-500/20":{"name":"tw-wd","usedBy":{}},"hover:before:bg-yellow-500/20":{"name":"tw-xd","usedBy":{}},"hover:text-mega-secondary/100":{"name":"tw-yd","usedBy":{}},"selection:text-mega-secondary":{"name":"tw-zd","usedBy":{}},"transition-[background-color]":{"name":"tw-ae","usedBy":{}},"after:dark:bg-gradient-to-br":{"name":"tw-be","usedBy":{}},"before:'
https://nextjs.org/docs/messages/module-not-found
> Build failed because of webpack errors
Let see if I can send you a reproduction later
hmmm I tried with Nextjs 14 and 15 boilerplate in CodeSandBox, it's just a default template of Nextjs with Tailwind, but I can't even use utwm from that. Please check the reproduction to see if I have any mistakes.
unhandledRejection TypeError: replaceMap.has is not a function
at /project/workspace/app/globals.css:450:1
at Root.<anonymous> (/project/workspace/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss-mangle/core/dist/index.cjs:231:53)
at /project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:193:25
at /project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:172:20
at Selector.each (/project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:159:16)
at Selector.walk (/project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:171:17)
at /project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:174:23
at Root.each (/project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:159:16)
at Root.walk (/project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:171:17)
at Root.walkClasses (/project/workspace/node_modules/.pnpm/[email protected]/node_modules/postcss-selector-parser/dist/selectors/container.js:191:17)
at Processor.func (/project/workspace/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss-mangle/core/dist/index.cjs:230:21) {
postcssNode: Rule {
raws: { before: '\n', between: ' ', semicolon: true, after: '\n' },
type: 'rule',
nodes: [ [Declaration] ],
parent: Root {
raws: [Object],
type: 'root',
nodes: [Array],
source: [Object],
lastEach: 1,
indexes: [Object],
[Symbol(isClean)]: false,
[Symbol(my)]: true
},
source: { input: [Input], start: [Object], end: [Object] },
selector: '.tw-da',
[Symbol(isClean)]: false,
[Symbol(my)]: true
}
}
Also having this problem with v3.0.1, I'm on NextJS 13.4.2
unplugin-tailwindcss-mangle version 2.3.0 seems to still be working with nextjs version 14.2.15
unplugin-tailwindcss-mangle version 2.3.0 seems to still be working with nextjs version 14.2.15
Not gonna lie, I didn’t expect this to work—running it on "next": "15.0.3". @sonofmagic 🤯
@laursenx clutch homie thanks