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

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 https://github.com/mui/mui-x/issues/13432
https://github.com/radix-ui/primitives/pull/2811/files#r1601508869 explain what happens

https://github.com/mui/material-ui/blob/5149a6517086e57cb97ee4fe9a39b6eedff0bc78/packages/mui-material/src/Tooltip/Tooltip.js#L560

Your environment

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

Jun 10 '24 16:06 oliviertassinari

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

Jul 02 '24 19:07 DiegoAndai

The Select component also appears the warning. My environment:

React 19 Canary
Material UI v5.x

Jul 18 '24 08:07 luc-nham

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?

Jul 18 '24 21:07 oliviertassinari

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?

Oct 13 '24 10:10 markedwards

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

Oct 14 '24 09:10 aarongarciah

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

Oct 24 '24 21:10 Joshbwr

@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

Oct 25 '24 09:10 aarongarciah

@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}.

Oct 28 '24 14:10 Joshbwr

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.

Oct 29 '24 16:10 JCB-K

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

Nov 02 '24 10:11 MarekLani

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)

Nov 06 '24 17:11 sawa-ko

Same problem here with nextjs 15.0.2

hook.js:608 Cannot update a component (`HotReload`) while rendering a different component (`ForwardRef(Portal)`). To locate the bad setState() call inside `ForwardRef(Portal)`, follow the stack trace as described in https://react.dev/link/setstate-in-render 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) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_0dee3c._.js:10786:358)
    at Navbar (navbar.jsx:22:34)
    at div (<anonymous>)
    at Styled(div) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_0dee3c._.js:10786:358)
    at Box (createBox.js:23:26)
    at MenuContextProvider (menu.jsx:31:39)
    at DashboardLayout [Server] (<anonymous>)
    at InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundErrorBoundary (not-found-boundary.tsx:33:5)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at LoadingBoundary (layout-router.tsx:466:3)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at InnerScrollAndFocusHandler (layout-router.tsx:289:3)
    at ScrollAndFocusHandler (layout-router.tsx:299:9)
    at RenderFromTemplateContext (render-from-template-context.tsx:8:10)
    at OuterLayoutRouter (layout-router.tsx:514:9)
    at SnackbarProvider (SnackbarProvider.tsx:43:9)
    at Styled(SnackbarProvider) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_0dee3c._.js:10786:358)
    at Notistack (notistack.jsx:33:37)
    at ScrollTop (scroll-top.jsx:5:37)
    at DefaultPropsProvider (DefaultPropsProvider.js:9:3)
    at RtlProvider (index.js:10:7)
    at ThemeProvider (ThemeProvider.js:31:5)
    at ThemeProvider (ThemeProvider.js:44:5)
    at ThemeProvider (ThemeProvider.js:13:14)
    at AppRouterCacheProvider (appRouterV13.js:17:5)
    at ThemeCustomization (index.jsx:16:46)
    at ConfigProvider (config.js:25:27)
    at SessionProvider (react.js:218:13)
    at IntlProvider (_IntlProvider.js:16:5)
    at NextIntlClientProvider (NextIntlClientProvider.js:16:5)
    at Providers (providers.jsx:21:37)
    at body (<anonymous>)
    at html (<anonymous>)
    at RootLayout [Server] (<anonymous>)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundErrorBoundary (not-found-boundary.tsx:33:5)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at DevRootNotFoundBoundary (dev-root-not-found-boundary.tsx:20:3)
    at ReactDevOverlay (ReactDevOverlay.tsx:97:3)
    at HotReload (hot-reloader-client.tsx:523:3)
    at Router (app-router.tsx:215:9)
    at ErrorBoundaryHandler (error-boundary.tsx:69:11)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at AppRouter (app-router.tsx:632:3)
    at ServerRoot (app-index.tsx:180:32)
    at Root (app-index.tsx:208:17)
overrideMethod @ hook.js:608
error @ intercept-console-error.ts:46
scheduleUpdateOnFiber @ react-dom-client.development.js:14255
dispatchReducerAction @ react-dom-client.development.js:7112
(anónimo) @ hot-reloader-client.tsx:568
handleClientError @ use-error-handler.ts:35
error @ intercept-console-error.ts:38
elementRefGetterWithDeprecationWarning @ react-jsx-runtime.development.js:384
Portal @ Portal.js:32
react-stack-bottom-frame @ react-dom-client.development.js:22340
renderWithHooks @ react-dom-client.development.js:5731
updateForwardRef @ react-dom-client.development.js:7736
beginWork @ react-dom-client.development.js:9988
runWithFiberInDEV @ react-dom-client.development.js:543
performUnitOfWork @ react-dom-client.development.js:14987
workLoopSync @ react-dom-client.development.js:14817
renderRootSync @ react-dom-client.development.js:14795
performWorkOnRoot @ react-dom-client.development.js:14289
performSyncWorkOnRoot @ react-dom-client.development.js:15858
flushSyncWorkAcrossRoots_impl @ react-dom-client.development.js:15720
processRootScheduleInMicrotask @ react-dom-client.development.js:15754
(anónimo) @ react-dom-client.development.js:15874
Mostrar 22 marcos más
Mostrar menos
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) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_0dee3c._.js:10786:358)
    at Navbar (navbar.jsx:22:34)
    at div (<anonymous>)
    at Styled(div) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_0dee3c._.js:10786:358)
    at Box (createBox.js:23:26)
    at MenuContextProvider (menu.jsx:31:39)
    at DashboardLayout [Server] (<anonymous>)
    at InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundErrorBoundary (not-found-boundary.tsx:33:5)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at LoadingBoundary (layout-router.tsx:466:3)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at InnerScrollAndFocusHandler (layout-router.tsx:289:3)
    at ScrollAndFocusHandler (layout-router.tsx:299:9)
    at RenderFromTemplateContext (render-from-template-context.tsx:8:10)
    at OuterLayoutRouter (layout-router.tsx:514:9)
    at SnackbarProvider (SnackbarProvider.tsx:43:9)
    at Styled(SnackbarProvider) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_0dee3c._.js:10786:358)
    at Notistack (notistack.jsx:33:37)
    at ScrollTop (scroll-top.jsx:5:37)
    at DefaultPropsProvider (DefaultPropsProvider.js:9:3)
    at RtlProvider (index.js:10:7)
    at ThemeProvider (ThemeProvider.js:31:5)
    at ThemeProvider (ThemeProvider.js:44:5)
    at ThemeProvider (ThemeProvider.js:13:14)
    at AppRouterCacheProvider (appRouterV13.js:17:5)
    at ThemeCustomization (index.jsx:16:46)
    at ConfigProvider (config.js:25:27)
    at SessionProvider (react.js:218:13)
    at IntlProvider (_IntlProvider.js:16:5)
    at NextIntlClientProvider (NextIntlClientProvider.js:16:5)
    at Providers (providers.jsx:21:37)
    at body (<anonymous>)
    at html (<anonymous>)
    at RootLayout [Server] (<anonymous>)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundErrorBoundary (not-found-boundary.tsx:33:5)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at DevRootNotFoundBoundary (dev-root-not-found-boundary.tsx:20:3)
    at ReactDevOverlay (ReactDevOverlay.tsx:97:3)
    at HotReload (hot-reloader-client.tsx:523:3)
    at Router (app-router.tsx:215:9)
    at ErrorBoundaryHandler (error-boundary.tsx:69:11)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at AppRouter (app-router.tsx:632:3)
    at ServerRoot (app-index.tsx:180:32)
    at Root (app-index.tsx:208:17)

Nov 10 '24 02:11 jangwalia

Same Error at my side too, migrated to next 15

Nov 10 '24 02:11 jangwalia

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)

Nov 12 '24 15:11 Merzouk-Ilyes

Same error

Nov 13 '24 14:11 p2pskins

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?

Nov 13 '24 17:11 DiegoAndai

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!

Nov 13 '24 21:11 misstickles

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)

Nov 14 '24 10:11 Merzouk-Ilyes

@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 https://github.com/mui/material-ui/issues/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 https://github.com/mui/material-ui/issues/44413.

Nov 14 '24 21:11 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.

These errors are happening on MUI v6. See above.

Nov 14 '24 21:11 markedwards

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

Nov 14 '24 22:11 DiegoAndai

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.

Nov 15 '24 14:11 markedwards

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

https://github.com/vercel/next.js/issues/72873

Nov 22 '24 04:11 jessejamesrich

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)

Nov 22 '24 05:11 Heet-Bhalodiya

@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: https://github.com/mui/material-ui/issues/44413. You can also try upgrading to v6 😊

Nov 26 '24 19:11 DiegoAndai

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",

Nov 27 '24 09:11 markedwards

@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!

Dec 20 '24 19:12 DiegoAndai

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",

Dec 21 '24 03:12 TJBlackman

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!

Dec 23 '24 15:12 DiegoAndai

I'm fixing one of them in: https://github.com/vercel/next.js/pull/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.

Dec 27 '24 21:12 oliviertassinari

material-ui material-ui copied to clipboard

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

Example with Tooltip

Context

Your environment

material-ui
material-ui copied to clipboard