Skip to content

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

@Vallo

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions