microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Home Page:https://react.fluentui.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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)

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.

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.