升级至Emotion v11后出现Stylis导出错误导致应用无法渲染

这个报错属于典型的依赖版本错配：
Emotion v11 生态下的 @emotion/cache 模块，依赖的是 stylis@4.x 版本提供的一系列特定API、导出常量。你当前项目实际解析到的 stylis 是3.x的旧版本，不存在这些导出项，因此触发了一连串的导入报错，最终导致应用渲染失败。

在动手修改前，可以先执行命令确认实际安装的stylis版本：

• npm 环境执行：npm ls stylis
• yarn 环境执行：yarn list stylis

执行结果大概率会显示项目内存在stylis 3.x版本，未匹配到Emotion要求的4.x版本。这类问题通常是项目其他业务依赖（比如旧版本的styled-components、老式CSS-in-JS库）间接锁定了stylis 3.x的版本，包管理器的版本复用策略将这个旧版本共享给了@emotion/cache，没有为其安装匹配的4.x依赖。

• 删除本地缓存的旧依赖：手动删除node_modules文件夹，以及项目根目录下的锁文件（package-lock.json / yarn.lock / pnpm-lock.yaml）。
• 顶层依赖显式安装匹配版本的stylis：执行安装命令 npm install stylis@4.1.3 --save-dev，该版本是经过Emotion v11全版本适配验证的稳定版本。
• 针对npm 7+ 版本，可在package.json中添加overrides规则，强制所有层级的子依赖统一使用指定版本的stylis，彻底避免版本错配：

  {
    "overrides": {
      "stylis": "4.1.3"
    }
  }
  

• pnpm环境则在package.json中添加对应的pnpm.overrides配置即可实现同样的强制版本锁定效果。
• 重新执行依赖安装流程，安装完成后再次运行之前的版本查询命令，确认所有依赖层级的stylis版本均为4.x，无3.x旧版本残留。
• 重启开发服务，重新构建项目，所有stylis相关的导入报错会完全消失，应用可正常渲染。

• 不要将stylis版本升级到5.x，当前Emotion v11尚未完成对stylis 5.x新API的适配，升级到5.x会触发新的同类导入错误。
• 此前完成的eslint规则配置、代码自动修复改动均无问题，不需要回滚已完成的Emotion v11升级操作。

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