[Tooltip] `dispatcher.useId is not a function` error after upgrading to React v18
See original GitHub issueDuplicates
- 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
Issue Analytics
- State:
- Created a year ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
reactjs - react select error on upgrade: TypeError: dispatcher ...
I used Material UI on Typescript with webpack. I added HMR blindly to the webpack config and this error appeared by running ...
Read more >Update on Async Rendering – React Blog
Reading DOM properties before an update The solution to this problem is to use the new “commit” phase lifecycle, getSnapshotBeforeUpdate . This ...
Read more >How To Handle DOM and Window Events with React
In this code, you destructured useState into a variable name to hold the input and a function called setName to update the data....
Read more >Bug listing with status UNCONFIRMED as at 2022/12/28 10 ...
Bug :128538 - "sys-apps/coreutils: /bin/hostname should be installed from coreutils not sys-apps/net-tools" status:UNCONFIRMED resolution: severity:enhancement ...
Read more >RHSA-2022:0056 - Security Advisory - Red Hat 客户门户网站
Moderate: OpenShift Container Platform 4.10.3 security update ... flagged UI does not always become available after operator installation ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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!
I have the same problem as you in antd. I hava tried update these package.Above⬇️
Hope is useful for you.