[Tooltip] `dispatcher.useId is not a function` error after upgrading to React v18

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

After upgrading to React v18, I get this:

Uncaught TypeError: dispatcher.useId is not a function
    at useId (react.development.js:1629:1)
    at useId (useId.js:36:1)
    at Tooltip (Tooltip.js:309:1)
    at renderWithHooks (react-dom.development.js:14972:1)
    at updateForwardRef (react-dom.development.js:16994:1)
    at beginWork (react-dom.development.js:18984:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3922:1)
    at HTMLUnknownElement.sentryWrapped (helpers.js:88:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3971:1)
    at invokeGuardedCallback (react-dom.development.js:4031:1)
    at beginWork$1 (react-dom.development.js:23780:1)
    at performUnitOfWork (react-dom.development.js:22619:1)
    at workLoopSync (react-dom.development.js:22553:1)
    at renderRootSync (react-dom.development.js:22519:1)
    at performSyncWorkOnRoot (react-dom.development.js:22136:1)
    at react-dom.development.js:11382:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11328:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11377:1)
    at flushSyncCallbackQueue (react-dom.development.js:11365:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21736:1)
    at dispatchAction (react-dom.development.js:16098:1)
    at index.js:740:1
    at Array.forEach (<anonymous>)
    at Object.call (index.js:739:1)
    at applyTx (index.js:194:1)
    at push (index.js:223:1)
    at index.js:622:1
    at Link.tsx:88:1
    at fn (kundeportal.js:559:7)
    at js?id=None:123:55
    at sentryWrapped (helpers.js:88:1)

Expected behavior 🤔

No errors.

Steps to reproduce 🕹

No response

Context 🔦

We are using Tooltip like this:

import { Tooltip as MuiTooltip } from '@mui/material';
import React from 'react';
import './Tooltip.scss';

type TooltipProps = {
  title: string | React.ReactElement;
  children: React.ReactElement;
};

export function Tooltip({ title, children }: TooltipProps) {
  return (
    <MuiTooltip title={title} placement="bottom">
      {children}
    </MuiTooltip>
  );
}

Your environment 🌎

`npx @mui/envinfo`

Browser used: Chromium

  System:
    OS: Linux 5.17 undefined
  Binaries:
    Node: 17.9.0 - /usr/bin/node
    Yarn: Not Found
    npm: 8.5.5 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react:  11.7.1
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.77
    @mui/material: ^5.6.2 => 5.6.2
    @mui/private-theming:  5.6.2
    @mui/styled-engine:  5.6.1
    @mui/system:  5.6.2
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @types/react: ^18.0.5 => 18.0.5
    react: ^18.0.0 => 18.0.0
    react-dom: ^18.0.0 => 18.0.0
    typescript: ^4.6.3 => 4.6.3

[hannah-jemima]

Also was getting this error but didn’t realise it was from Material UI.

Looks like the syntax to hook up the react-redux Provider has changed here: https://react-redux.js.org/introduction/getting-started (in the code block where it mentions “// As of React 18”).

To get this to work I had to make sure I was on version 18 or above for react and react-dom, and updated all other client npm packages too. Many needed to be updated with: npm update package-name --legacy-peer-deps

Took me a few hours to figure this out. Hope it helps someone!

[wustzhaohui]

This codesandbox.io template

So should i just run npm update package-name --legacy-peer-deps

I have the same problem as you in antd. I hava tried update these package.Above⬇️

 "@types/react": "^18.0.21",
 "@types/react-dom": "^18.0.6",
 "react-dom": "^18.2.0",

Hope is useful for you.