Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Tracked by #42381
oliviertassinari opened this issue Jun 10, 2024 · 29 comments · Fixed by #42818 or #43132
Closed
Tracked by #42381

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

oliviertassinari opened this issue Jun 10, 2024 · 29 comments · Fixed by #42818 or #43132
Assignees
Labels
bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module! React 19 support PRs required to support React 19

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 10, 2024

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>
  );
}
SCR-20240610-pupd

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

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

Your environment

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

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 10, 2024
@DiegoAndai DiegoAndai self-assigned this Jun 10, 2024
@DiegoAndai DiegoAndai removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 10, 2024
@DiegoAndai DiegoAndai changed the title [react 19][tooltip] Accessing element.ref was removed in React 19 [material-ui] Accessing element.ref was removed in React 19 Jul 2, 2024
@DiegoAndai
Copy link
Member

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

@luc-nham
Copy link

luc-nham commented Jul 18, 2024

The Select component also appears the warning. My environment:

  • React 19 Canary
  • Material UI v5.x

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Jul 18, 2024

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?

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

@markedwards
Copy link

markedwards commented Oct 13, 2024

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
Copy link
Member

aarongarciah commented Oct 14, 2024

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

@Joshbwr
Copy link

Joshbwr commented Oct 24, 2024

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
Copy link
Member

@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
Copy link

Joshbwr commented Oct 28, 2024

@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
Copy link

JCB-K commented Oct 29, 2024

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
Copy link

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

@sawa-ko
Copy link

sawa-ko commented Nov 6, 2024

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)

@jangwalia
Copy link

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)

@jangwalia
Copy link

Same Error at my side too, migrated to next 15

@Merzouk-Ilyes
Copy link

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)
at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
at commitHookEffectListMount (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:10732:29)
at commitHookPassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:10852:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12627:13)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12729:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12729:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12729:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12729:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)
at recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12601:11)
at commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12620:11)

@p2pskins
Copy link

Same error

@DiegoAndai
Copy link
Member

DiegoAndai commented Nov 13, 2024

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
Copy link

misstickles commented Nov 13, 2024

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
Copy link

Merzouk-Ilyes commented Nov 14, 2024

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?

@DiegoAndai here's the correct error log , i'm using next V15, MUI V5.16.7, React 18
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)
at Portal (webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/Portal/Portal.js:41:163)
at react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:22339:20)
at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:5731:22)
at updateForwardRef (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:7736:19)
at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:9988:18)
at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14986:22)
at workLoopConcurrent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14980:9)
at renderRootConcurrent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14955:15)
at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14287:11)
at performWorkOnRootViaSchedulerTask (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15843:7)
at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:44:48)

@DiegoAndai
Copy link
Member

@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
Copy link

@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
Copy link
Member

DiegoAndai commented Nov 14, 2024

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

@markedwards
Copy link

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
Copy link

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
Copy link

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)
    at Navbar (Navbar.tsx:28:11)
    at Navbar [Server] (<anonymous>)
    at div (<anonymous>)
    at Styled(div) (http://localhost:3000/_next/static/chunks/node_modules__pnpm_a08251._.js:6940:324)
    at div (<anonymous>)
    at VerticalLayout [Server] (<anonymous>)
    at div (<anonymous>)
    at LayoutWrapper (LayoutWrapper.tsx:21:11)
    at AuthGuard [Server] (<anonymous>)
    at Provider (Provider.tsx:58:3)
    at ReduxProvider (ReduxProvider.tsx:11:26)
    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 CssVarsProvider (createCssVarsProvider.js:51:7)
    at AppRouterCacheProvider (appRouterV13.js:15:5)
    at ThemeProvider (index.tsx:45:11)
    at SettingsProvider (settingsContext.tsx:68:17)
    at VerticalNavProvider (verticalNavContext.tsx:32:39)
    at SessionProvider (index.js:454:24)
    at NextAuthProvider (nextAuthProvider.tsx:7:36)
    at Providers [Server] (<anonymous>)
    at Layout [Server] (<anonymous>)
    at InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    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 InnerLayoutRouter (layout-router.tsx:324:3)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    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 body (<anonymous>)
    at html (<anonymous>)
    at TranslationWrapper [Server] (<anonymous>)
    at RootLayout [Server] (<anonymous>)

 

@DiegoAndai
Copy link
Member

@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
Copy link

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",
Screenshot 2024-11-27 at 09 28 09

@DiegoAndai
Copy link
Member

@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
Copy link

TJBlackman commented Dec 21, 2024

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.

image

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
Copy link
Member

DiegoAndai commented Dec 23, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tooltip This is the name of the generic UI component, not the React module! React 19 support PRs required to support React 19
Projects
None yet