Latest version error @ NextJS 14.2.4

[nkke30]

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'
  }
}

[sonofmagic]

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.

[sonofmagic]

Add nextjs support at unplugin-tailwindcss-mangle@3.0.1, you could have a try.

[nkke30]

Giving it a try right now.

[nkke30]

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

[sonofmagic]

Can you provide me with a reproducible case? I would be very grateful.

[hoangnhan2ka3]

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

[hoangnhan2ka3]

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/@tailwindcss-mangle+core@3.0.0/node_modules/@tailwindcss-mangle/core/dist/index.cjs:231:53)
    at /project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:193:25
    at /project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:172:20
    at Selector.each (/project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:159:16)
    at Selector.walk (/project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:171:17)
    at /project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:174:23
    at Root.each (/project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:159:16)
    at Root.walk (/project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:171:17)
    at Root.walkClasses (/project/workspace/node_modules/.pnpm/postcss-selector-parser@6.1.1/node_modules/postcss-selector-parser/dist/selectors/container.js:191:17)
    at Processor.func (/project/workspace/node_modules/.pnpm/@tailwindcss-mangle+core@3.0.0/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
  }
}

[Superamaja]

Also having this problem with v3.0.1, I'm on NextJS 13.4.2