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.

Sign up for GitHub

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

Jump to bottom

[TextField] dispatcher.useId is not a function in React 18 #31190

Closed
2 tasks done
zl-david opened this issue Feb 24, 2022 · 16 comments
Closed
2 tasks done

[TextField] dispatcher.useId is not a function in React 18 #31190

zl-david opened this issue Feb 24, 2022 · 16 comments
Labels
component: text field This is the name of the generic UI component, not the React module! status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it

Comments

@zl-david
Copy link

Duplicates

  • 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 🕹

Example in this codesandbox

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
@zl-david zl-david added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 24, 2022
@benbourgeois-92
Copy link

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.

@danilo-leal danilo-leal changed the title React 18 - dispatcher.useId is not a function [TextField] dispatcher.useId is not a function in React 18 Feb 28, 2022
@danilo-leal danilo-leal added component: text field This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 28, 2022
@tom-richter
Copy link

Using "react": "18.0.0-alpha-5ca4b0433-20211020" and "react-dom": "18.0.0-alpha-5ca4b0433-20211020" also works for me.

@zl-david
Copy link
Author

zl-david commented Mar 8, 2022

@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)

@aklassen
Copy link

I switched to "react": "18.0.0-beta-24dd07bd2-20211208" and "18.0.0-beta-24dd07bd2-20211208" - Works as well :)

@gnortpro gnortpro mentioned this issue Mar 20, 2022
Closed
@cindyloo
Copy link

still an issue with react 18. is there an update?

@ZeeshanTamboli
Copy link
Member

Closing this issue as it works with the latest React v18.2.0

@PrimozRome
Copy link

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?

@ZeeshanTamboli
Copy link
Member

@PrimozRome Please provide a CodeSandbox reproducing the issue.

@olegzaitsevway
Copy link

I have the same error when try to use the Modal component from 'antd' library.

"react": "^18.2.0",
"react-dom": "18.2.0",

@ZeeshanTamboli ZeeshanTamboli reopened this Aug 8, 2022
@PrimozRome
Copy link

@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!

@CalebJamesStevens
Copy link

Issue is still peristant when testing mui5 components with enzyme in react18.2 and react-dom 18.2

@pavankwebelight
Copy link

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"

@vaukalak
Copy link

vaukalak commented Dec 2, 2022

@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!

And what is your version of react-dom ?

@mnajdova
Copy link
Member

mnajdova commented Dec 2, 2022

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.

@mnajdova mnajdova closed this as completed Dec 2, 2022
@mnajdova mnajdova added status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it and removed bug 🐛 Something doesn't work labels Dec 2, 2022
@nivapo95
Copy link

I got the same error with react@18.2.0 and solved it by upgrading react-dom to 18.2.0

nickumia added a commit to nickumia/world that referenced this issue Feb 17, 2023
@nickumia
fix: dispatcher.useId is not a function
35277f7 
Hopefully, mui/material-ui#31190 (comment)
nickumia added a commit to nickumia/world that referenced this issue Feb 17, 2023
@nickumia
React fixes (#45)
4e7cff3 
* fix: dispatcher.useId is not a function

Hopefully, mui/material-ui#31190 (comment)

* refactor: ReactDOM.render deprecated

Replace with createRoot

* fix: createRoot import location
@Chandra6160
Copy link

I got the same error with react@18.2.0 and solved it by upgrading react-dom to 18.2.0

this solution worked for me upgrading react-dom to 18.2.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: text field This is the name of the generic UI component, not the React module! status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests