升级@coreui/coreui-pro后AppAside未从@coreui/react导出报错如何解决

出现该报错的核心原因是CoreUI从v3版本开始做了不兼容的破坏性更新，v2.x版本中的AppAside组件已被重命名、调整导出路径，v4.x版本的@coreui/react包不再导出该组件。

你可以按以下步骤处理：

• 替换组件引用路径
  v4.x中原AppAside组件重命名为CSidebar，统一放到@coreui/react-pro包下导出，把所有旧的引入写法替换即可：
  旧写法：

  import { AppAside } from '@coreui/react'
  

  新写法：

  import { CSidebar } from '@coreui/react-pro'
  

• 调整组件属性适配
  CSidebar的属性和旧版AppAside有差异，常用属性调整规则如下：
  • 原fixed属性替换为position="fixed"
  • 原offCanvas属性替换为overlay
  • 控制显隐的show属性保留，无需调整
  • 自定义宽度属性已移除，改为通过style或者CSS变量--c-sidebar-width配置
• 批量兼容方案
  如果项目中AppAside引用次数多，不想逐个修改，可以新增一个兼容层做别名导出：

  // 新增src/coreui-compat.js文件
  export { CSidebar as AppAside } from '@coreui/react-pro'
  

  把所有原import { AppAside } from '@coreui/react'的语句替换为import { AppAside } from 'src/coreui-compat'即可，组件调用代码不需要额外修改。
• 同步检查其他旧组件
  CoreUI 4.x对大部分v2.x的组件都做了重命名，其他常用旧组件对应关系如下，可以同步校验替换：
  • AppHeader → CHeader
  • AppFooter → CFooter
  • AppSidebar → CSidebar

内容的提问来源于stack exchange，提问作者Vishnu Vardhan Srinivasan