React生产构建因组件混淆无法定位缺失key元素问题求助

问题背景 #

使用SingleSpa、React、MUI技术栈开发项目时，遇到以下问题：

• 浏览器控制台抛出列表中每个子元素都应具备唯一"key" prop警告，该警告仅在生产构建版本中出现，开发模式下无任何同类提示
• 生产环境代码经过压缩混淆，组件名被替换为pn、Wc、ec这类无意义短名称，无法直接通过组件调用栈对应到源码中的实际组件，定位难度极高
• 已完成的排查工作：
  • 全量扫描项目中所有通过数组遍历渲染的同级元素，确认所有遍历生成的元素均已配置合法且唯一的key属性
  • 对位置、数量固定，仅通过条件渲染控制显隐的同级组件（例如多个并列的Tooltip组件）也尝试手动添加key属性，但警告并未完全消除，判断仍有遗漏的问题点未被发现

控制台完整警告调用栈 #

Warning: Each child in a list should have a unique "key" prop. 
    in pn (created by ForwardRef)
    in div (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by Styled(Component))
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Styled(Component))
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by Styled(input))
    in Styled(input) (created by ForwardRef)
    in div (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by Wc)
    in div (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Wc)
    in Wc (created by ig)
    in div (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by ec)
    in div (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by ec)
    in div (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by ec)
    in header (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Styled(Component))
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by ec)
    in div (created by Styled(div))
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by ec)
    in ec (created by ig)
    in ig (created by rootComponent)
    in lo (created by rootComponent)
    in co (created by xo)
    in xo (created by rootComponent)
    in Wr (created by Hr)
    in $r (created by Hr)
    in Hr (created by rootComponent)
    in rootComponent
    in SingleSpaReactErrorBoundary(@mesalvo/mesalvo-mf-diagnosticreport)
    in SingleSpaRoot(@mesalvo/mesalvo-mf-diagnosticreport)

排查进展 #

• 安装React DevTools后排查效率提升明显，可通过组件树直接匹配混淆后的组件名与实际渲染节点：
  
• 通过DevTools定位到混淆名为Ga的组件对应头部导航栏模块，对应源码片段如下：

return (
  <AppBar component="div" position="sticky" elevation={0}>
    <Toolbar>
      <Grid container spacing={1} alignItems="center">
        <Grid item>
          <Tooltip title="Modulauswahl">
            <IconButton color="inherit" onClick={openLeftDrawer} edge="start">
              <MenuIcon />
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item xs>
          <Routes>
            <Route
              path="/:appPath/:profileId/patient/*"
              element={<PatientContextHeader patient={context.patient} />}
            />
            {/* ... 其余Route元素 ... */}
          </Routes>
        </Grid>
        <Grid item>
          <Tooltip title="Hilfe">
            <IconButton color="inherit">
              <HelpIcon />
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item>
          <Tooltip title="Administration">
            <IconButton
              color="inherit"
              onClick={() => {
                window.location.replace("/admin/");
              }}
            >
              <SettingsIcon />
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item>
          <Tooltip title="Dark Mode">
            <IconButton color="inherit">
              <Brightness4Icon />
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item>
          <ProfileMenu context={context} profileService={profileService} />
        </Grid>
        <Grid item>
          <UserMenu />
        </Grid>
        <Grid item>
          <Tooltip title="Objektauswahl">
            <IconButton color="inherit" onClick={openRightDrawer} edge="end">
              <MenuIcon />
            </IconButton>
          </Tooltip>
        </Grid>
      </Grid>
    </Toolbar>
  </AppBar>
)

内容的提问来源于stack exchange，提问作者Matthias Wuttke