material-ui
material-ui copied to clipboard
mui
[TextField] `dispatcher.useId` is not a function in React 18
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] 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
Hi, this is an issue that I had as well. I know that it isn't a solution, but my Blitz.js setup worked when I downgraded to react and react-dom 17. Whatever the issue is, it has something to do with 18.
Using "react": "18.0.0-alpha-5ca4b0433-20211020" and "react-dom": "18.0.0-alpha-5ca4b0433-20211020" also works for me.
@tom-richter Thanks, using 18.0.0-alpha-5ca4b0433-20211020 works for me as well! (I couldn't downgrade to 17 because Suspense is not supported)
I switched to "react": "18.0.0-beta-24dd07bd2-20211208" and "18.0.0-beta-24dd07bd2-20211208" - Works as well :)
Closing this issue as it works with the latest React v18.2.0
I have this same issue on "react": "^18.2.0".
error - TypeError: dispatcher.useId is not a function
Anyone knows what it is?
I have the same error when try to use the Modal component from 'antd' library.
"react": "^18.2.0", "react-dom": "18.2.0",
@PrimozRome Please provide a CodeSandbox reproducing the issue.
I have managed to solve the issue. I only upgraded react but not react-dom. After that, the error was gone!
Issue is still peristant when testing mui5 components with enzyme in react18.2 and react-dom 18.2
I got the same error when using the "useId" hook in React Native.
I have tried to solve the issue. I only change versions of React and React native both as below. After that, the error was gone!
"react": "18.2.0", "react-native": " 0.70"
@PrimozRome Please provide a CodeSandbox reproducing the issue.
I have managed to solve the issue. I only upgraded
reactbut notreact-dom. After that, the error was gone!
And what is your version of react-dom ?
Updating react, react-dom and react-scripts to their latest version works: https://codesandbox.io/s/bold-shannon-53uc9j?file=/src/index.tsx I am closing the issue as no one created any reproduction.
I got the same error with [email protected] and solved it by upgrading react-dom to 18.2.0
this solution worked for me upgrading react-dom to 18.2.0
