[material-ui] Accessing element.ref was removed in React 19 #42604
Comments
oliviertassinari
added
bug 🐛
DiegoAndai
removed
the
status: waiting for maintainer
DiegoAndai
changed the title
|
Updated issue so it covers all cases and not only the Tooltip one. |
|
The Select component also appears the warning. My environment:
|
@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?
At first sight, it doesn't seem to make sense, what's the direction? |
|
I see warnings about this when using |
|
@markedwards can you share a reproduction? I'm unable to reproduce using the Popover e.g. https://codesandbox.io/embed/ntwvd6 |
I'm get the same warning. |
|
@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 |
|
@aarongarciah I'm using nextjs v14.2.14 |
|
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. |
|
same issue, just updated to next.js 15 and I get the error for Select and PopOver |
|
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) |
|
|
Same Error at my side too, migrated to next 15 |
|
Same error (NEXT 15 , REACT 18) TypeError: Cannot read properties of undefined (reading 'documentElement') |
|
Same error |
|
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: |
|
I upgraded I don't have a repro, but the error manifests with 15.0.3 with 5.15.11. Edit: Changed the version of |
@DiegoAndai here's the correct error log , i'm using next V15, MUI V5.16.7, React 18 |
|
@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. |
These errors are happening on MUI v6. See above. |
|
Hey, @markedwards. May I ask you to provide a live example? We weren't able to reproduce with v6 (comment). |
|
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. |
|
Seeing this in Next 15 + MUI 6. Actually updated to 6 to fix and nada. Possibly related to this. |
|
Hey @DiegoAndai, Seeing this in Next 15.0.3 + MUI 5.16.6 + React 18.3.1. |
|
@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 😊 |
|
I see the error using only MUI v6 packages. From package.json: 
|
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=codeExample with Tooltip
https://codesandbox.io/p/sandbox/silly-sea-m9cjyn?file=%2Fsrc%2FDemo.tsx
Context
material-ui/packages/mui-material/src/Tooltip/Tooltip.js
Line 560 in 5149a65
Your environment
react v19.0.0-rc.0
@mui/material v5.15.19
The text was updated successfully, but these errors were encountered: