Unocss not working in NextJS 14.2.3 version

[turkgenciyim]

UnoCSS version

0.59.4

Describe the bug

I was going to prefer unocss for a brand new start in nextjs, I created a next-app and followed the same steps to install unocss:
unocss nextjs example

But the situation is that I could not solve this error even though I did the same steps 2 times:

note: Removing the global.css file fixes the error, so I think there is a problem in @ import or @ unocss in global css.

 ⨯ ./src/app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@14.2.3_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@14.2.3_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css
TypeError: require(...) is not a function
Import trace for requested module:
./src/app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@14.2.3_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@14.2.3_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css
./src/app/globals.css

Reproduction

https://codesandbox.io/p/devbox/exciting-haslett-w8dny8?file=%2Fpackage.json%3A14%2C23

System Info

Windows 10
NodeJS > 20
Next 14.2.3

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[linkscope]

I have the same issue, downgrade unocss and @unocss/postcss to 0.58.9 is works.

[sibbng]

#3380 changed the behavior of how CJS module is resolved. I took a quick look at it but I don't know how we could fix/restore the previous behavior.

Similar issue: #3724. They solved the issue by moving the config file to ESM format but I don't think this is possible for Next.js. If I remember correctly Next.js was very strict about PostCSS config format.

/cc @kwaa @userquin

[kwaa]

I don't think this is possible for Next.js. If I remember correctly Next.js was very strict about PostCSS config format.

It looks like next.js@^14.2.0-canary.25 already supports PostCSS ESM Config.

vercel/next.js#34448 (comment)
vercel/next.js#63109

It seems like plugins still need to be provided as strings though. I'll look into that later.

[kwaa]

It looks like Next.js is still trying to require instead of import despite the PostCSS ESM Config, and there's nothing I can do about it.

An error occurred in `next/font`.

TypeError: require(...) is not a function
    at /workspaces/sandbox/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:62:63
    at plugin (/workspaces/sandbox/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:30:44)
    at Processor.normalize (/workspaces/sandbox/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/processor.js:18:13)
    at new Processor (/workspaces/sandbox/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/processor.js:11:25)
    at postcss (/workspaces/sandbox/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/postcss.js:26:10)
    at /workspaces/sandbox/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/config/blocks/css/index.js:127:37
    at async /workspaces/sandbox/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:86:33
    at async Span.traceAsyncFn (/workspaces/sandbox/node_modules/.pnpm/next@14.2.1_@babel+core@7.24.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:154:20)

[userquin]

The problem is the default export in cjs, we need to use export = <default_export> in d.ts and d.cts files. I send a PR to fix all dual esm/cjs packages, check #3750

[turkgenciyim]

I have the same issue, downgrade unocss and @unocss/postcss to 0.58.9 is works.

This worked for me, thanks a lot!