Minified React error #321及#130打包报错如何排查修复？

React minified error #130本质是尝试将非React元素类型的对象/函数直接作为渲染节点输出，开发环境的宽松校验不会触发报错，但生产构建的严格校验会识别到异常抛出错误。
结合ListActions的设计需求，问题大概率出在组件内部没有区分传入的操作项是「已渲染完成的JSX元素」还是「待执行的React组件函数」，两种类型的渲染逻辑不兼容，混用就会触发该错误。

类型判断兼容两种传参形式 #

在ListActions内部对传入的操作项做类型判断，分别适配两种输入场景，示例代码如下：

import React from 'react'

const ListActions = ({ actions }) => {
  // 兼容单操作项传入的场景
  const actionList = Array.isArray(actions) ? actions : [actions]
  return (
    <div className="list-actions">
      {actionList.map((action, index) => {
        // 传入的是已经渲染好的JSX元素，直接返回
        if (React.isValidElement(action)) {
          return React.cloneElement(action, { key: index })
        }
        // 传入的是React组件函数，先实例化再渲染
        if (typeof action === 'function') {
          const ActionComp = action
          return <ActionComp key={index} />
        }
        return null
      })}
    </div>
  )
}

export default ListActions

其他排查方向 #

如果上述方案没有解决问题，可依次检查以下场景：

• 是否存在循环导入，导致生产构建后组件被加载为undefined
• 组件导出、引入方式是否匹配，不要混用export default和具名导出导致引入对象异常
• 是否在非组件的普通工具函数中调用了Hook，生产构建压缩后会触发Hook调用规则校验失败

内容的提问来源于stack exchange，提问作者Hossein Fallah