bug: menu break in NextJs production build

[technophile-04]

What version of daisyUI are you using?

^3.0.2

Describe your issue

Description :

When running locally menu link item has the following CSS rules applied :

But when once you build and serve it the above CSS rules are not added to menu link item

Reproduction steps :

1. Open https://stackblitz.com/edit/daisyui-nextjs-lzc8vy : This is minimal reproduction repo forked from daisyUI nextjs template and I have just copied menu with icons & badge

2. Terminate process in terminal and build the app -> npm run build

3. Serve the exported build -> npm run start

You will the menu item are broken vertical instead of being horizontal :

Notes :

This also breaks in Next version ^13.1.5 here is the repo link to test it out : https://github.com/scaffold-eth/scaffold-eth-2

Some references discussion :

1 . #2272

2 . #2183

What browsers are you seeing the problem on?

All browsers

Reproduction URL

https://stackblitz.com/edit/daisyui-nextjs-lzc8vy

[saadeghi]

Update Next.js to the latest version.
It was a CSS processing bug in Next.js but it's fixed now.

[wuarmin]

@saadeghi I have a similar issue in a create-react-app production build:

Menu in dev:

Menu in prod:

What can I do?
Thanks!

[saadeghi]

@wuarmin can you update all the dependencies (especially the ones about build tool or CSS processing)?
Because it's not an issue from daisyUI, it was a bug from CSS build tool which must be fixed by the latest version.

If it didn't help, please share a reproduction repo.

[wuarmin]

@saadeghi Thanks! An upgrade helped. I don't know which package caused the error.