[material-ui] Accessing element.ref was removed in React 19

[oliviertassinari]

In React 19, ref is now a prop and should be accessed through props.ref. We have some instances of this we should fix: https://github.com/search?q=repo:mui/material-ui%20children.ref&type=code

Example with Tooltip

https://codesandbox.io/p/sandbox/silly-sea-m9cjyn?file=%2Fsrc%2FDemo.tsx

import * as React from "react";
import Tooltip from "@mui/material/Tooltip";

export default function BasicTooltip() {
  const ref = React.useRef();
  return (
    <Tooltip title="Delete">
      <button ref={ref}>hello</button>
    </Tooltip>
  );
}

Warning: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
at Tooltip (node_modules/@mui/material/Tooltip/Tooltip.js:294:85)

Context

• First reported in [data grid] Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release mui-x#13432
• https://github.com/radix-ui/primitives/pull/2811/files#r1601508869 explain what happens

material-ui/packages/mui-material/src/Tooltip/Tooltip.js

Line 560 in 5149a65

const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);

Your environment

react v19.0.0-rc.0
@mui/material v5.15.19

[DiegoAndai]

Updated issue so it covers all cases and not only the Tooltip one.

[luc-nham]

The Select component also appears the warning. My environment:

• React 19 Canary
• Material UI v5.x

[oliviertassinari]

The Select component also appears the warning

@luc-nham Right, we solved some of the instances of the issue but we didn't solve the issue. There are still hits for this: https://github.com/search?q=repo%3Amui%2Fmaterial-ui%20children.ref&type=code.

---

Actually, we have 3 times the same components, so 3 times the same fix to apply?

• https://github.com/mui/base-ui/blob/master/packages/mui-base/src/legacy/FocusTrap/FocusTrap.tsx
• https://github.com/mui/material-ui/blob/next/packages/mui-base/src/FocusTrap/FocusTrap.tsx
• https://github.com/mui/material-ui/blob/next/packages/mui-material/src/Unstable_TrapFocus

At first sight, it doesn't seem to make sense, what's the direction?

[markedwards]

I see warnings about this when using Popover using the latest Material UI 6.1.2 and React 18.3.1. Is this issue actually resolved?

[aarongarciah]

@markedwards can you share a reproduction? I'm unable to reproduce using the Popover e.g. https://codesandbox.io/embed/ntwvd6

[Joshbwr]

I see warnings about this when using Popover using the latest Material UI 6.1.2 and React 18.3.1. Is this issue actually resolved?

I'm get the same warning.
@mui/material 6.1.3
react 18.3.1

[aarongarciah]

@Joshbwr can you send a reproduction? I'm unable to reproduce, see https://codesandbox.io/p/sandbox/popover-mui-material-6-1-5-react-18-3-1-zhcs7v

[Joshbwr]

@aarongarciah I'm using nextjs v14.2.14
and it seems to be related to when I set my nextjs config to use experimental:{taint:true}.

[JCB-K]

Here is a repro case, using Next.js and Joy: https://codesandbox.io/p/devbox/tender-albattani-7pdqjs

It's important to use Next.js in order to repro this issue, it uses React's canary release internally, which is on version 19.

[MarekLani]

same issue, just updated to next.js 15 and I get the error for Select and PopOver

[sawa-ko]

Same problem here with nextjs 15.0.2

hook.js:608 Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack
    at Portal (Portal.js:26:5)
    at Modal (Modal.js:81:31)
    at MuiDrawer-root (emotion-element-7a1343fa.browser.development.esm.js:48:26)
    at Drawer (Drawer.js:134:31)
    at Customization (index.jsx:34:28)
    at HeaderContent (index.jsx:30:41)
    at div (<anonymous>)
    at MuiToolbar-root (emotion-element-7a1343fa.browser.development.esm.js:48:26)
    at Toolbar (Toolbar.js:55:31)
    at header (<anonymous>)
    at MuiPaper-root (emotion-element-7a1343fa.browser.development.esm.js:48:26)
    at Paper (Paper.js:62:31)
    at MuiAppBar-root (emotion-element-7a1343fa.browser.development.esm.js:48:26)
    at AppBar (AppBar.js:112:31)
    at Styled(Component) 

[jangwalia]

Same Error at my side too, migrated to next 15

[Merzouk-Ilyes]

Same error (NEXT 15 , REACT 18)

TypeError: Cannot read properties of undefined (reading 'documentElement')
at getScrollbarSize (webpack-internal:///(app-pages-browser)/./node_modules/@mui/utils/esm/getScrollbarSize/getScrollbarSize.js:9:38)
at handleContainer (webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/Modal/ModalManager.js:83:89)
at ModalManager.mount (webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/Modal/ModalManager.js:189:37)
at handleMounted (webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/Modal/useModal.js:60:17)
at useModal.useEventCallback[handleOpen] (webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/Modal/useModal.js:74:17)
at useEventCallback.useRef (webpack-internal:///(app-pages-browser)/./node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js:28:29)
at useModal.useEffect (webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/Modal/useModal.js:118:17)
at react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:22420:20)

[p2pskins]

Same error

[DiegoAndai]

Hey everyone. Please provide the Material UI version with which you're experiencing each issue and a minimal reproduction. This can be a link to a repository or a live example. Otherwise we won't be able to debug it.

@JCB-K Regarding Joy UI, there's no plan to support React 19 at the moment, sadly. We're currently focusing on the Material UI package.

@Merzouk-Ilyes, the log you posted shows a different error: TypeError: Cannot read properties of undefined (reading 'documentElement'). May I ask you to open a separate issue for it?

[misstickles]

I upgraded next from 14.1.4 to 15.0.3 and was presented with this error. The hint in this thread lead me to update all my @mui packages from 5.15.11 to 6.1.7. That has resolved this error.

I don't have a repro, but the error manifests with 15.0.3 with 5.15.11.

Edit: Changed the version of next (v15 next, not v14, with v5 mui) - sorry!

[Merzouk-Ilyes]

Hey everyone. Please provide the Material UI version with which you're experiencing each issue and a minimal reproduction. This can be a link to a repository or a live example. Otherwise we won't be able to debug it.

@DiegoAndai here's the correct error log , i'm using next V15, MUI V5.16.7, React

Error: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
at createUnhandledError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/console-error.js:23:19)
at handleClientError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js:42:98)
at console.error (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/globals/intercept-console-error.js:53:56)
at Object.elementRefGetterWithDeprecationWarning (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react/cjs/react-jsx-runtime.development.js:377:17)

[DiegoAndai]

@misstickles @Merzouk-Ilyes, thank you for your replies. Currently, Material UI v5 doesn't support React 19's RC; only v6 does. We will backport the changes to v5. It's one of the tasks listed in #42381. We plan to begin backporting soon.

So these errors are "expected" now, but we're working on fixing it. If you need React 19 right now and can't wait, I would recommend updating to Material UI v6, the update process should be straightforward.

You can follow the progress of backporting on #44413.

[markedwards]

@misstickles @Merzouk-Ilyes, thank you for your replies. Currently, Material UI v5 doesn't support React 19's RC; only v6 does. We will backport the changes to v5. It's one of the tasks listed in #42381. We plan to begin backporting soon.

These errors are happening on MUI v6. See above.

[DiegoAndai]

Hey, @markedwards. May I ask you to provide a live example? We weren't able to reproduce with v6 (comment).

[markedwards]

I have no yet been able to reproduce in a CodeSandbox, but it's definitely affecting multiple people as you see above. I'm not sure yet what's different. I'm on Next 14.2.17 for what its worth.

[jessejamesrich]

Seeing this in Next 15 + MUI 6. Actually updated to 6 to fix and nada. Possibly related to this.

vercel/next.js#72873

[Heet-Bhalodiya]

Hey @DiegoAndai, Seeing this in Next 15.0.3 + MUI 5.16.6 + React 18.3.1.

Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack
    at Tooltip (Tooltip.js:220:31)
    at ModeDropdown (ModeDropdown.tsx:24:34)
    at div (<anonymous>)
    at div (<anonymous>)
    at NavbarContent [Server] (<anonymous>)
    at div (<anonymous>)
    at header (<anonymous>)
    at Styled(header) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_a08251._.js:6940:324)

[DiegoAndai]

@jessejamesrich may I ask you to share a reproduction? 😊

@Heet-Bhalodiya, this is expected as React 19 fixes are not yet implemented in v5, only v6. We're backporting the React 19 changes to v5 and will release a compatible version soon, but it has yet to be released. You can follow the progress here: #44413. You can also try upgrading to v6 😊

[markedwards]

I see the error using only MUI v6 packages.

From package.json:

    "@emotion/react": "^11.13.5",
    "@emotion/styled": "^11.13.5",
    "@mui/icons-material": "^6.1.8",
    "@mui/material": "^6.1.8",
    "@mui/material-nextjs": "^6.1.8",
    "@mui/x-date-pickers": "^7.22.3",

[DiegoAndai]

@markedwards sorry for the delay. Could you provide a minimal reproduction? This would help a lot, otherwise, we can't investigate it. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!

[TJBlackman]

I also just upgraded a project from Next 14 to 15, and I also got this error, but after also upgrading my @mui/... packages from v5 to v6, everything worked and I do not get this error. I also deleted package-lock.json, node_modules, and .next dir, then did fresh install.

Versions of stuff:
"react": "19.0.0",
"react-dom": "19.0.0",
"next": "15.1.2",
"@mui/icons-material": "^6.2.1",
"@mui/material": "^6.2.1",
"@mui/material-nextjs": "^6.2.1",
"@mui/x-data-grid": "^7.23.3",

[DiegoAndai]

If you're encountering this issue, you might have to update to the latest release of v5 or v6.

• If you're on v5, please update to ^5.16.12
• If you're on v6, please update to ^6.2.0

If you already updated and are still encountering it, please open a separate issue with a minimal reproduction. Thanks!

[oliviertassinari]

I'm fixing one of them in: vercel/next.js#74334. Going to https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router and opening the /about page is enough to reproduce the problem.

We should really get rid of legacyBehavior #44871 but we might as well fix that bug.

[oliviertassinari]

Another one: styled-components/styled-components#5510. We did a workaround for this in #41388, but we might as well fix the root.