"Each child in a list should have a unique "key" prop..." warning when importing library on other project.

[Vallo]

Describe the bug

I have a project in library mode that exports a component. Said component uses @mui/material package and consists of the following:

    <Tooltip title={'some title'}>
      <Grid container direction="column" alignItems="center">
        <span >{"some text"}</span>
      </Grid>
    </Tooltip>

If I run the library as standalone project, I get no errors. If I build in development mode vite build --mode development and install the package on another project, I get no errors. But if I build in production mode vite build then when I import it on the other project I get the following warning on console:

Each child in a list should have a unique "key" prop...

Adding a random key to <Grid> component and building for production also removes the warning.

This is not the only situation where this warning pops up, I have at least 3 and they are hard to track. This is just an example I could isolate.

I am also not sure if the error is related to Vite or to Mui.

Reproduction

I created a minimal reproducible example, with instructions:

https://github.com/Vallo/vite-library-mode-unique-key-bug

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 11.58 GB / 31.22 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chromium: 95.0.4638.69
    Firefox: 94.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[RamunasO]

Have the same issue. Only happens in library mode and production build, both when importing into another project or using UMD bundle on its own. Not using MUI.

This is the code that seems to be causing the issue, if I remove React.cloneElement and use trigger directly, error does not occur.

<>
  {React.cloneElement(
    trigger,
    mergeProps({onPress: () => state.open()}, triggerProps)
  )}
  <AnimatePresence>
    {state.isOpen && (
      <DialogContext.Provider value={context}>
        {overlay}
      </DialogContext.Provider>
    )}
  </AnimatePresence>
</>  

[amits97]

Facing same issue. Was anyone able to fix the error?

[gsato-flash]

Any updates on this? I'm facing the same issue using MUI DatePicker with LocalizationProvider.

[ozgurbaserdem]

We're also facing this issue. I see that this ticket has been around since almost a year now. Will it be looked into by someone?

[FFTYYY]

Same. Hope this issue can be solved earlier.

[sapphi-red]

I wasn't able to reproduce it. I guess it's fixed now.
If you still have an issue, please create a new issue.