Next.js 13.4.12构建后出现React压缩错误#418/#423求助

在Next.js 13.4.12的page.tsx中编写了如下代码，开发模式下页面渲染正常，但执行生产构建后，页面无法渲染{tag.name}，同时抛出两个错误：

• Uncaught Error: Minified React error #418;
• Uncaught Error: Minified React error #423;

将代码中的untag替换为{...untag}后问题解决，想了解错误产生的根本原因。

代码示例 #

'use client'

export default function Home() {
  const untag = { id: 'untag', name: 'General' }

  const columns = [
    {
      title: 'Time',
      dataIndex: 'time',
      fixed: 'left',
      width: 140,
    },
    ...([untag].map((tag) => {
      return {
        title: tag.name,
      }
    })),
  ]
  console.log('columns', columns)
  return (
    <div>
      {[untag].map((tag) => {
        return (
          <div key={tag.name}>
            <span>{tag.name}</span>
          </div>
        )
      })}
    </div>
  )
}

这是Next.js 13.4.x版本App Router的构建优化bug导致的：

1. 你的组件虽标记了'use client'，但构建时Next.js的静态分析会将直接引用的内部对象untag误判为可在Server端静态处理的内容，导致生产环境中该对象的引用被错误绑定到Server渲染上下文。
2. 当Client端尝试水合（hydration）时，React检测到对象引用的环境不匹配，触发了生产环境下的精简错误：
   • #418对应“在非React函数组件/自定义Hook中调用了Hook”——实际是Next.js内部处理时的误触发，并非你代码中的Hook问题；
   • #423对应“渲染的Hook数量比上一次渲染多”——同样是环境不匹配导致的内部Hook执行异常。
3. 使用{...untag}创建新对象后，相当于在Client端动态生成了全新的对象引用，避开了Next.js静态分析的误判，确保整个处理流程完全在Client环境中执行，因此问题得以解决。

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