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

[data grid] Uncaught MissingRowIdError: No row with id <id> found #16638

Open
nicolasfripp opened this issue Feb 18, 2025 · 6 comments · May be fixed by #16672
Open

[data grid] Uncaught MissingRowIdError: No row with id <id> found #16638

nicolasfripp opened this issue Feb 18, 2025 · 6 comments · May be fixed by #16672
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information

Comments

@nicolasfripp
Copy link

nicolasfripp commented Feb 18, 2025 •
edited by github-actions bot
Loading

Steps to reproduce

Steps:

  1. I have a datagridpro with one element
  2. I remove the element
  3. The error is shown.

Current behavior

When i remove the last element of the grid, this error is shown in the console.

Expected behavior

I expect to remove the last element and do not receive any errors.

Context

The issue is shown if I add this prop to the DataGridPro component:
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "Mui-even" : "Mui-odd")}
This is happening in the last version of the DataGridPro. If I use for example, "@mui/x-data-grid-pro": "^7.23.5", no error is shown.

Your environment

npx @mui/envinfo 
System:
    OS: Linux 6.10 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.10.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @mui/base: 5.0.0-beta.69 => 5.0.0-beta.69 
    @mui/icons-material: 6.4.4 => 6.4.4 
    @mui/material: 6.4.4 => 6.4.4 
    @mui/styled-engine-sc: npm:@mui/[email protected] => 6.4.3 
    @mui/system: 6.4.3 => 6.4.3 
    @mui/utils: ^6.4.3 => 6.4.3 
    @mui/x-data-grid: ^7.27.0 => 7.27.0 
    @mui/x-data-grid-pro: ^7.27.0 => 7.27.0 
    @mui/x-date-pickers: ^7.27.0 => 7.27.0 
    @mui/x-date-pickers-pro: ^7.27.0 => 7.27.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: 18.3.13 => 18.3.13 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: ^5.7.3 => 5.7.3

Search keywords: getRowClassName DataGridPro MissingRowIdError
@nicolasfripp nicolasfripp added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 18, 2025
@github-actions github-actions bot changed the title [DataGridPro] Uncaught MissingRowIdError: No row with id <id> found [data grid] Uncaught MissingRowIdError: No row with id <id> found Feb 18, 2025
@github-actions github-actions bot added the component: data grid This is the name of the generic UI component, not the React module! label Feb 18, 2025
@michelengelen
Copy link
Member

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

@michelengelen michelengelen added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 19, 2025
@nicolasfripp
Copy link
Author

@michelengelen I couldn't find a way to consistently reproduce it in my application. Sometimes it happens and sometimes it doesn't. I found this from two days ago. It seems to be the same problem I'm facing.

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Feb 19, 2025
@michelengelen
Copy link
Member

Could be, but without a solid reproduction which we can look into this is not possible for us to fix. Take this as an example: DEMO

I use a rows state top update the rows and the getRowClassName prop as well that you provided. I am not able to reproduce this bug. That's why I am asking to provide a reproduction example that reliably reproduces the bug so that we can investigate.

@michelengelen michelengelen added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 19, 2025
@livingforjesus
Copy link

@nicolasfripp Closed the pr because it started working on latest version(was on 7.25.0 then switched to 7.27.0 and it started working). But I got the same error again from a different datagrid table. Main problem is its hard to reproduce

@livingforjesus livingforjesus linked a pull request Feb 20, 2025 that will close this issue
Open
1 task
@livingforjesus
Copy link

@michelengelen Created a PR to fix this(and 1 other place that triggers this issue for me). Would appreciate if you took a look
#16672

@lauri865
Copy link
Contributor

lauri865 commented Feb 21, 2025 •
edited
Loading

I can't reproduce this anymore (I did previously). How are y'all deleting the rows?

Wonder if moving this line up a notch would fix any remaining edge cases, but ideally we should have a reproduction so we don't add unnecessary checks that hide the root cause:

mui-x/packages/x-data-grid/src/components/GridRow.tsx

Lines 299 to 301 in f663e70

if (!rowNode) {
return null;
}

Above this block:

mui-x/packages/x-data-grid/src/components/GridRow.tsx

Line 283 in f663e70

const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[DataGrid] Add checks to verify if row exists. livingforjesus/mui-x
4 participants
@lauri865 @michelengelen @nicolasfripp @livingforjesus