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.

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

[data grid] Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release #13432

Closed
MessiDaGod opened this issue Jun 9, 2024 · 3 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it

Comments

@MessiDaGod
Copy link

MessiDaGod commented Jun 9, 2024

Steps to reproduce

Link to live example: https://github.com/MessiDaGod/react-hydration-error

Steps to reproduce

  1. install
yarn install
  1. start
yarn start
  1. Table rendering
    Screenshot 2024-06-09 125819

  2. Dev tools error
    Screenshot

Current behavior

logging error to console

Expected behavior

not logging error to console

Context

get rid of annoying error, eventually fixing the root issue of ref now being a regular prop in react 19

Your environment

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.1 - D:\repos\react-hydration-error\node_modules.bin\npm.CMD
pnpm: 8.15.7 - ~\AppData\Local\pnpm\pnpm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (125.0.2535.92)
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.19
@mui/material: ^5.15.19 => 5.15.19
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-data-grid: ^7.6.2 => 7.6.2
react: ^19.0.0-rc-cc1ec60d0d-20240607 => 19.0.0-rc-f994737d14-20240522
react-dom: ^19.0.0-rc-cc1ec60d0d-20240607 => 19.0.0-rc-f994737d14-20240522
types-react: 19.0.0-rc.0
typescript: ^5.4.5 => 5.4.5

Search keywords: element.ref React 19 React@rc react-dom@rc

@MessiDaGod MessiDaGod added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 9, 2024
@michelengelen michelengelen changed the title Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release [data grid] Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release Jun 10, 2024
@michelengelen
Copy link
Member

Hey @MessiDaGod we are currently not supporting React 19, as you can see from this line in the package.json:

"react-dom": "^17.0.0 || ^18.0.0"

We are working on supporting it though. For information on the effort please follow #13356

Copy link

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@MessiDaGod: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 10, 2024
@oliviertassinari
Copy link
Member

Root issue created mui/material-ui#42604

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it 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
Development

No branches or pull requests

3 participants