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

[vlad-ivanov-d]

@spmonahan it doesn't work even with React 18 and Next.js 15. So this issue is not related to React 19.

The problem is in isForwardRef func right here:

fluentui/packages/react-components/react-motion/library/src/utils/getChildElement.ts

Line 8 in b5d571f

if (typeof child.type === 'string' || ReactIs.isForwardRef(child)) {

All components are Symbol(react.transitional.element) in Next.js (I guess because of SSR stuff). That's why this check always fails.

[vlad-ivanov-d]

This is how I workaround this (dirty hack). Basically I had to replace getChildElement.js with my patched version.

in package.json I added this script:
"postinstall": "cp src/tools/getChildElement.js node_modules/@fluentui/react-motion/lib/utils/getChildElement.js"

src/tools/getChildElement.js:

import * as React from "react";
import * as ReactIs from "react-is";
export function getChildElement(children) {
  try {
    const child = React.Children.only(children);
    if (
      typeof child.type === "string" ||
      ReactIs.isForwardRef({
        ...child,
        /**
         * Patch type because of issues with Next.js
         * https://github.com/microsoft/fluentui/issues/33404
         */
        ["$$typeof"]:
          child["$$typeof"] === Symbol.for("react.transitional.element") ? Symbol.for("react.element") : child["$$typeof"],
      })
    ) {
      return child;
    }
    // We don't need to do anything here: we catch the exception from React to throw a more meaningful error
    // eslint-disable-next-line no-empty
  } catch {}
  throw new Error(
    [
      "@fluentui/react-motion: Invalid child element.",
      "\n",
      "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().",
    ].join(""),
  );
}

[koltyakov]

@spmonahan any update on this? Did you guys manage to check the possible solution?

Next.js and SSR are the hot topic. It would be great seeing Fluent UI compatible with the top notch technologies.

[spmonahan]

@koltyakov , I was just triaging the issue to get it into the correct backlog so no further updates from me 🙂. Given the season I wouldn't expect anyone to pick this up before January.