@emotion/react重复加载问题排查：组件配置还是版本兼容？

核心原因 #

这个警告是两个问题共同导致的：

1. 版本不一致 #

你的组件@lafarmer28/ks-density-calendar依赖的@emotion/react版本是^11.10.6，而client-app项目中使用的是^11.10.5。npm会将这两个存在小版本差异的包视为独立安装项，导致项目中同时存在两份@emotion/react，触发重复加载提示。

2. 组件依赖配置不合理 #

组件的package.json把@emotion/react、@mui/material这类通用第三方库放进了dependencies字段，而非peerDependencies。这会导致组件发布时自带一份这些依赖，和项目本身已安装的版本产生冲突。

另外，vite.config.ts里的别名配置存在错误：

resolve: {
  alias: {'@emotion/react': '@emotion/react/jsx-runtime'},
},

该配置将@emotion/react直接指向其jsx运行时模块，破坏了正常的模块结构，会加重重复加载的问题。

解决办法 #

1. 调整组件的依赖配置 #

修改组件的package.json，将第三方依赖移至peerDependencies并指定兼容版本范围：

{
  "peerDependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.10.0",
    "@mui/material": "^5.10.0",
    "date-fns": "^2.29.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "peerDependenciesMeta": {
    "@emotion/react": {"optional": false},
    "@emotion/styled": {"optional": false},
    "@mui/icons-material": {"optional": false},
    "@mui/material": {"optional": false},
    "date-fns": {"optional": false},
    "react": {"optional": false},
    "react-dom": {"optional": false}
  },
  "dependencies": {
    // 仅保留组件独有的、项目不会重复安装的依赖（无相关依赖则留空）
  }
}

配置后组件会直接使用项目中已安装的依赖版本，避免重复安装。

2. 删除vite.config中的错误别名 #

移除resolve下的错误别名配置，让@emotion/react按正常逻辑解析：

resolve: {
  // 删除 '@emotion/react': '@emotion/react/jsx-runtime' 这一行
},

3. 统一项目依赖版本 #

在client-app项目中执行以下命令，将@emotion相关版本与组件对齐：

npm install @emotion/react@^11.10.6 @emotion/styled@^11.10.6

4. 清理依赖并重新安装 #

在client-app项目目录下执行：

rm -rf node_modules package-lock.json
npm install

验证 #

重启client-app项目，检查浏览器DevTools是否仍出现重复加载警告。若问题未解决，可执行npm ls @emotion/react查看版本树，确认是否仍有多版本共存的情况。

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