修改package.json后Yarn安装引发React-Admin异常求助

核心问题分析 #

你的问题本质是依赖版本兼容性冲突：修改package.json后，yarn安装时自动升级了部分依赖，导致react-admin生态（如ra-supabase、@react-admin/*包）与核心react、react-dom版本不匹配，进而引发样式丢失和React状态更新时机错误（渲染时更新其他组件状态）。

解决方案步骤 #

1. 固定所有react-admin生态依赖的版本 #

打开你的package.json，将所有react-admin相关依赖的版本号从带^的范围版本改为固定版本，避免yarn自动升级：

{
  "dependencies": {
    "@raphiniert/ra-data-postgrest": "1.2.0",
    "@react-admin/ra-form-layout": "4.5.1",
    "@react-admin/ra-rbac": "4.2.0",
    "@react-admin/ra-relationships": "4.1.2",
    "@supabase/supabase-js": "2.26.0",
    "ra-i18n-polyglot": "4.8.3",
    "ra-input-rich-text": "4.8.3",
    "ra-language-english": "4.9.2",
    "ra-language-french": "4.8.3",
    "ra-supabase": "2.0.3",
    "ra-supabase-language-english": "2.0.5",
    "ra-supabase-language-french": "2.0.5",
    "react-admin": "4.14.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

2. 彻底清理缓存并重新安装依赖 #

执行以下命令，确保完全清除旧依赖和缓存：

# 删除依赖目录和lock文件
rm -rf node_modules yarn.lock
# 清理yarn缓存
yarn cache clean
# 强制按固定版本安装
yarn install --frozen-lockfile

3. 检查依赖冲突 #

验证安装后的依赖版本是否一致，避免多版本共存：

# 检查react-admin实际安装版本
yarn list react-admin
# 检查react是否有多个版本
yarn why react

如果发现react存在多个版本，找到引入冲突版本的依赖，要么升级该依赖，要么锁定其版本以匹配react 18.2.0。

4. 排查自定义组件的状态更新逻辑 #

即使你确认JSX无误，也要检查自定义的表单组件（如TextInput的封装、自定义字段）：

• 禁止在组件的render阶段（或函数组件的顶层）调用setState或任何会触发状态更新的函数
• 确保所有状态更新都放在useEffect、事件回调（如onChange）中

5. 修复样式异常 #

样式异常通常是Material-UI版本不匹配导致的，react-admin 4.x依赖Material-UI 5.x，执行以下命令确认版本：

yarn list @mui/material

如果版本不符合，手动添加固定版本的@mui/material到package.json，再重新安装。

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