NuqsAdapter breaks CSS layer order #966
|
I am using nuqs 2.4.1 in a Next 14.2.25 app. I am applying a custom layer order in my main layout file ( I am quite confused who NuqsAdapter could interfer since nuqs is not related to UI/CSS. Would anyone know more? |
Replies: 1 comment 5 replies
|
Wow, that is wild. Indeed, the adapter is only a React Context provider, so it should have no effect on styles. Would you be able to open an issue with a minimal reproduction please? |
|
The issue seems to be related to ColorSchemeScript Fix in production project<body>
<ReactQueryProvider>
<MantineProvider theme={theme}>
{/* <ColorSchemeScript /> */}
<NuqsAdapter>{children}</NuqsAdapter>
{/* {children} */}
</MantineProvider>
</ReactQueryProvider>
</body>Correct layer order (not using NuqsAdapter)
Wrong layer order (when using NuqsAdapter)
|
|
Thanks for the follow-up. In the Mantine docs I see their ColorSchemeScript is not a child of the MantineProvider, but an anterior sibling, could that be related to your issue, which nuqs surfaces for some weird reason? Another thing you could try is moving the nuqs adapter higher up the tree, and see if you get the same kind of results. |
|
I tried both, unfortunately to no success. I extracted a minimal reproducible example and documented some findings in the README.md: https://codesandbox.io/p/github/stefan-girlich/mre--nuqs-mantine-layer-order-issue/main I also shared this on Mantine's Discord. |
|
Thanks, I tried your repro and the issue occurs just by importing the adapter, not even by including it in the React tree: import 'nuqs/adapters/next/app'That could suggest a bundler issue, or a CJS/ESM incompatibility issue with Mantine, but at least it rules out the context provider as the source of the issue. Edit: if I remove the "use client" directive in Edit: yeah definitely a "use client" directive issue. If I completely remove nuqs, the simple fact of importing this file in the root layout causes the issue: // src/app/client.tsx
'use client'
import { useState } from 'react'
export function ClientComponent() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>Increment</button>
} |
|
Thanks for all the debugging work! There are at least two open Next.js issues, with workarounds in the comments; linking them for visibility: |
Thanks, I tried your repro and the issue occurs just by importing the adapter, not even by including it in the React tree:
That could suggest a bundler issue, or a CJS/ESM incompatibility issue with Mantine, but at least it rules out the context provider as the source of the issue.
Edit: if I remove the "use client" directive in
nuqs/adapters/next/app, the problem also goes away. So definitely hinting towards the bundling issue, maybe this is something that we could escalate to the Next.js team.Edit: yeah definitely a "use client" directive issue. If I completely remove nuqs, the simple fact of importing this file in the root layout causes the issue:
// sr…