安装react-konva时的npm依赖冲突及ES模块导出问题解决

方案一：降级React生态以匹配@material-ui/core@4.x #

@material-ui/core@4.11.1仅兼容React 16.8.0~17.x，而react-konva@18.x要求React 18+，统一降级到React 17.x可彻底解决冲突：

1. 卸载当前不兼容的包：

   npm uninstall react react-dom react-konva
   

2. 安装适配版本：

   npm install react@^17.0.2 react-dom@^17.0.2 react-konva@^17.0.2 --save
   

3. 重启项目即可，此时peer依赖冲突和编译错误都会消失。

方案二：升级Material-UI到v5（推荐长期方案） #

Material-UI v5（@mui/material）已完全支持React 18，升级后可直接使用react-konva@18.x：

1. 卸载旧版Material-UI：

   npm uninstall @material-ui/core
   

2. 安装MUI v5核心依赖：

   npm install @mui/material @emotion/react @emotion/styled --save
   

3. 替换项目中所有@material-ui/core的导入路径为@mui/material（例如import Button from '@material-ui/core/Button'改为import Button from '@mui/material/Button'）。
4. 重新安装react-konva（无需--force）：

   npm install react-konva --save
   

5. 重启项目，依赖冲突和编译问题均会消除。

方案三：强制统一依赖版本（临时过渡方案，需谨慎） #

若不想升级或降级，可通过npm的overrides字段强制让@material-ui/core适配React 18（存在潜在兼容性风险）：

1. 在项目根目录的package.json中添加：

   "overrides": {
     "@material-ui/core": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     }
   }
   

2. 删除旧依赖文件：

   rm -rf node_modules package-lock.json
   

3. 重新安装依赖：

   npm install
   

4. 针对编译错误，补充配置：
   • 若使用Create React App，在.env文件中添加SKIP_PREFLIGHT_CHECK=true跳过依赖兼容性检查。
   • 手动配置babel时，确保@babel/preset-react版本≥7.18.0，并启用runtime: 'automatic'选项。

注意：方案三可能导致@material-ui/core出现未知运行时问题，仅建议作为临时过渡使用。

内容的提问来源于stack exchange，提问作者A.G.Progm.Enthusiast