[TextField] `dispatcher.useId` is not a function in React 18
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When rendering the <TextField />
component in a React 18 project (e.g. in BlitzJS), following error is shown:
TypeError
dispatcher.useId is not a function
useId
[https://yeev72.csb.app/node_modules/react/cjs/react.development.js:1697:21]()
useId@https://yeev72.csb.app/node_modules/
[mui/utils/esm/useId.js:22:21]()
TextField@https://yeev72.csb.app/node_modules/
[mui/material/TextField/TextField.js:92:50]()
...
Expected behavior 🤔
The Textfield component renders without errors
Steps to reproduce 🕹
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: macOS 12.2.1
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 19.84 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
Managers:
Homebrew: 3.3.11 - /usr/local/bin/brew
Maven: 3.5.4 - /usr/local/bin/mvn
RubyGems: 3.0.3.1 - /usr/bin/gem
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 4.2.1 - /usr/bin/gcc
Git: 2.30.1 - /usr/bin/git
Clang: 12.0.5 - /usr/bin/clang
Servers:
Apache: 2.4.51 - /usr/sbin/apachectl
Virtualization:
Docker: 20.10.12 - /usr/local/bin/docker
Parallels: 16.0.1 - /usr/local/bin/prlctl
VirtualBox: 5.2.22 - /usr/local/bin/vboxmanage
IDEs:
IntelliJ: 2021.2.3
Nano: 2.0.6 - /usr/bin/nano
Sublime Text: Build 3211
Vim: 8.2 - /usr/bin/vim
Xcode: /undefined - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Go: 1.12.5 - /usr/local/bin/go
Java: javac 16 - /Users/david/.sdkman/candidates/java/current/bin/javac
Perl: 5.30.3 - /usr/bin/perl
Python: 2.7.15 - /usr/local/bin/python
Python3: 3.8.2 - /usr/bin/python3
Ruby: 2.6.8 - /usr/bin/ruby
Databases:
SQLite: 3.36.0 - /usr/bin/sqlite3
Browsers:
Chrome: 98.0.4758.102
Edge: 98.0.1108.56
Firefox: 97.0.1
Safari: 15.3
Tested in Chrome and Firefox
Issue Analytics
- State:
- Created 2 years ago
- Reactions:6
- Comments:14 (3 by maintainers)
Top Results From Across the Web
Uncaught TypeError: dispatcher.useSyncExternalStore is not ...
This happens because react-redux is not supported yet with React 18 (React and React Native). Downgrade react-redux to the previous version ...
Read more >typeerror: react.useid is not a function - You.com - You.com
The argument a React function component receives is its props, which is an object with named properties for each of the properties.
Read more >Hooks API Reference - React
The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component. setState(newState);....
Read more >Exploring React 18's three new APIs - LogRocket Blog
With the release of React 18 on the horizon, familiarize yourself with ... not the selector functions, to decide whether to retrieve the ......
Read more >React Hooks & Context (Without Redux) | by Amir Waisman
This TodosDispatch context is used in order to provide any child components under it, an access to the reducer's dispatch function. We provide...
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
still an issue with react 18. is there an update?
Issue is still peristant when testing mui5 components with enzyme in react18.2 and react-dom 18.2