使用Core UI React组件开发管理面板时编译出现构建报错如何解决？

This error occurred during the build time and cannot be dismissed
上述提示为React项目构建阶段的通用报错标识，仅代表构建流程中断，不指向具体错误原因，可按以下步骤逐一排查解决：

第一步：定位具体错误信息 #

• 滚动查看构建日志中该提示上方的完整报错栈，通常会明确标注错误类型、触发错误的文件路径与行号，优先根据具体报错信息处理

常见触发原因与解决方案 #

版本不兼容 #

• Core UI React不同版本对React基础版本有要求：v4要求React >=17.0.0，v5要求React >=18.0.0，版本不匹配会直接触发构建失败
• 执行npm list react react-dom查看本地安装的React版本，和Core UI要求不一致时，安装对应版本即可，比如适配Core UI v5执行命令：npm install react@^18 react-dom@^18

依赖损坏/缺失 #

• Core UI组件依赖@coreui/icons、@coreui/utils等配套包，漏装或者依赖安装过程中文件损坏都会触发构建报错
• 删除本地node_modules文件夹与锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install完整安装所有依赖

代码导入/语法错误 #

• 检查Core UI组件的导入写法，正确格式为import { CCard, CCardBody } from '@coreui/react'，不要使用相对路径直接导入组件库内部文件
• 检查业务代码中是否使用了未配置对应转译插件的实验性语法（比如装饰器、顶层await等），这类语法会触发编译失败

构建配置冲突 #

• 自定义webpack/vite配置的项目，检查loader规则是否和Core UI打包产物冲突：如果babel-loader默认排除了所有node_modules文件，需要把/node_modules/@coreui/路径加入babel转译白名单
• 使用create-react-app搭建的无自定义配置项目，构建前先清理缓存执行：npx react-scripts build --clean

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