[Bug]: @fluentui/react-motion: Invalid child element.

[anishkumar127]

Component

Drawer

Package version

^9.56.3

React version

19.0.0-rc-66855b96-20241106

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i3-1125G4 @ 2.00GHz
    Memory: 2.34 GB / 15.65 GB
  Browsers:
    Edge: Chromium (130.0.2849.52)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @fluentui/react-components: ^9.56.3 => 9.56.3
    @fluentui/react-icons: ^2.0.266 => 2.0.266
    @types/react: ^18.3.12 => 18.3.12
    @types/react-dom: ^18.3.1 => 18.3.1
    react: 19.0.0-rc-66855b96-20241106 => 19.0.0-rc-66855b96-20241106
    react-dom: 19.0.0-rc-66855b96-20241106 => 19.0.0-rc-66855b96-20241106

Current Behavior

Crashing application

• when im trying to use Drawer in next.js 15. it's saying
  Error: @fluentui/react-motion: Invalid child element. Motion factories require a single child element to be passed. That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().

Expected Behavior

it's should work.

Reproduction

don't have the link

Steps to reproduce

Install next.js 15.
Use the fluent ui 9 latest version
and try to use the drawer

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]

@anishkumar127 Please provide a repro link so I can take a look.

StackBlitz is a good way to set this up.

[anishkumar127]

@anishkumar127 Please provide a repro link so I can take a look.

StackBlitz is a good way to set this up.

Link: https://stackblitz.com/edit/stackblitz-starters-m3ccwj?description=The%20React%20framework%20for%20production&file=next%2Fpackage.json&title=Next.js%20Starter

even now i'm not able to install npm install @fluentui/react-components with the next.js 15 it's saying this on terminal.

[spmonahan]

This is because react-components does not currently support React 19. See: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/package.json#L82

React 19 will be supported in the future.

@tudorpopams and @dmytrokirpa for visibility.