Uncaught TypeError: Cannot read property 'componentWillReact' of undefined

在使用 mobx、mobx-react 出現錯誤分析及解決方案

Uncaught TypeError: Cannot read property 'componentWillReact' of undefined
    at eval (mobx-react.module.js?90c4:1)
    at W (mobx-react.module.js?90c4:1)

情況一

使用 React.memo 造成，出現這種情況大多是在 mobx-react v6.1.0 , 此時只需要升級或降級 mobx-react 版本即可

參考 issues : ‘componentWillReact’ of undefined after updating to 6.1.0

情況二

使用 @observer 後出現該錯誤，解決方案是將 babel 插件 @babel/plugin-proposal-decorators 的 legacy 參數設置爲 true, 同時設置 @babel/plugin-proposal-class-properties 插件的 loose 參數設置爲 true

注意

• @babel/plugin-proposal-decorators 插件 啓用 legacy 模式下不能啓用 decoratorsBeforeExport （既不能設置爲 true 也不能設置爲 false），否則會出現錯誤如下: ‘decoratorsBeforeExport’ can’t be used with legacy decorators.

• 若 @babel/plugin-proposal-decorators 插件啓用了 legacy 模式， 則 @babel/plugin-proposal-class-properties 必須啓用 loose 模式；
  • 詳見 note-compatibility-with-babel-plugin-proposal-class-properties

• @babel/plugin-proposal-decorators 必須在 @babel/plugin-proposal-class-properties 插件之前，
  • 詳見 note-compatibility-with-babel-plugin-proposal-class-properties

配置參考

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}