迁移Babel assumptions配置后mobx-react-lite的observer失效怎么办？

问题原因 #

你把两个assumption的取值搞反了。
你之前使用@babel/plugin-proposal-class-properties等插件时配置的loose: true，对应的顶层assumption映射规则是：

• setPublicClassFields: true 对应原来class-properties插件的loose模式
• privateFieldsAsProperties: true 对应原来private-methods、private-property-in-object插件的loose模式

你现在将这两个值设为false，Babel就会用完全符合ES规范的Object.defineProperty逻辑定义类属性，Mobx的响应式劫持逻辑无法正常处理这种定义方式的类属性，导致可观察状态失效，observer组件自然感知不到状态更新，也不会抛出报错。

修复方案 #

修改你的Babel配置，将两个assumption的值改为true即可：

{
  "assumptions": {
    "privateFieldsAsProperties": true,
    "setPublicClassFields": true
  },
  "presets": [
    ["@babel/preset-env"],
    ["@babel/preset-react", { "runtime": "automatic" }],
    ["@babel/preset-typescript"]
  ]
}

如果你项目使用TypeScript，建议同步把tsconfig.json里的useDefineForClassFields设为false，和Babel的编译行为对齐，避免出现不一致的编译问题。

内容的提问来源于stack exchange，提问作者Just Alex