Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Giving warning in next.js 15 #33388

Open
2 tasks done
anishkumar127 opened this issue Dec 3, 2024 · 5 comments
Open
2 tasks done

[Bug]: Giving warning in next.js 15 #33388

anishkumar127 opened this issue Dec 3, 2024 · 5 comments

Comments

@anishkumar127
Copy link

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)

Image

Expected Behavior

Should not give the warning and error

Reproduction

https://stackblitz.com/edit/stackblitz-starters-t6chfr?description=The%20React%20framework%20for%20production&file=package.json,app%2FHome.tsx,app%2Fpage.tsx&title=Next.js%20Starter

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.
@spmonahan
Copy link
Contributor

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

@spmonahan spmonahan added the Area: SSR Server-side rendering label Dec 3, 2024
@anishkumar127
Copy link
Author

anishkumar127 commented Dec 4, 2024

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

@spmonahan
Copy link
Contributor

spmonahan commented Dec 4, 2024

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?

@anishkumar127
Copy link
Author

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.

@spmonahan
Copy link
Contributor

We don't currently support React 19 but the team is working on that.

@tudorpopams and @dmytrokirpa for visibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants