[Bug]: Giving warning in next.js 15
anishkumar127 opened this issue · comments
Component
Other...
Package version
^9.56.1
React version
19.0.0-rc-66855b96-20241106
Environment
Development
Current Behavior
warnings
WARN Issues with peer dependencies found
.
├─┬ react-redux 9.1.2
│ ├── ✕ unmet peer react@^18.0: found 19.0.0-rc-66855b96-20241106
│ └─┬ use-sync-external-store 1.2.2
│ └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc-66855b96-20241106
├─┬ @reduxjs/toolkit 2.3.0
│ └── ✕ unmet peer react@"^16.9.0 || ^17.0.0 || ^18": found 19.0.0-rc-66855b96-20241106
└─┬ @fluentui/react-components 9.56.1
└─┬ @fluentui/react-alert 9.0.0-beta.124
└─┬ @fluentui/react-avatar 9.6.42
└─┬ @fluentui/react-popover 9.9.24
└─┬ @fluentui/react-context-selector 9.1.69
└── ✕ unmet peer scheduler@">=0.19.0 <=0.23.0": found 0.25.0-rc-66855b96-20241106
Done in 11s
errors in ui
@fluentui/react-provider: There are conflicting ids in your DOM. Please make sure that you configured your application properly.
Configuration guide: https://aka.ms/fluentui-conflicting-ids
Call Stack
createUnhandledError
file:///C:/Users/AnishKumar/Music/helpdesknext/helpdesk/.next/static/chunks/74038_next_dist_client_0dd523..js (744:19)
handleClientError
file:///C:/Users/AnishKumar/Music/helpdesknext/helpdesk/.next/static/chunks/74038_next_dist_client_0dd523..js (905:98)
Expected Behavior
Should not give the warning and error
Reproduction
Steps to reproduce
Install next.js 15 version and install fluent ui 9 this "@fluentui/react-components": "^9.56.1", version
and can't provide reproduction link because stackblitz default now only support the next.js 13 version but im current version is next.js of 15
Are you reporting an Accessibility issue?
None
Suggested severity
Urgent - No workaround and Products/sites are affected
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.
I'm not familiar with Next, but it doesn't look like you've configured IdPrefixProvider
as you mentioned in your bug. Can you confirm whether you've tried this?
We also have docs for configuring Fluent with Next 13+ and SSR here: https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering-next-js-appdir-setup--docs
I'm not familiar with Next, but it doesn't look like you've configured
IdPrefixProvider
as you mentioned in your bug. Can you confirm whether you've tried this?We also have docs for configuring Fluent with Next 13+ and SSR here: https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering-next-js-appdir-setup--docs
- yes i did it , next.js appDir Provider wrap to the layout.tsx and wrap Fluent ui provider with IdPrefixProvider which example are given into the somewhere in the previous issues on github but still not working.
- this issue appears in the next.js 15 with react 19 RC
I don't see the provider in layout.tsx
? Am I missing something?
this issue appears in the next.js 15 with react 19 RC
Does the issue go away with React 18?
I don't see the provider in
layout.tsx
? Am I missing something?this issue appears in the next.js 15 with react 19 RC
Does the issue go away with React 18?
yes this issue go away with React 18.
We don't currently support React 19 but the team is working on that.
@tudorpopams and @dmytrokirpa for visibility.