Next.js项目使用date-fns时npm build构建失败的原因是什么？

问题根因 #

你的构建报错和date-fns工具库没有任何关联，从错误日志可以直接定位核心问题：Next.js静态预渲染阶段，代码里用到的event对象本身就是undefined，此时尝试访问event.start属性自然会抛出异常。
你之前测试的三种写法全部忽略了event本身可能不存在的边界情况，所以不管怎么调整日期判断逻辑都会构建失败。第三种写法的逻辑错误属于基础的对象判断误区：两个值相同的日期对象是不同引用，用===判断永远返回false，不需要在这个写法上浪费时间。

修复方案 #

先加属性存在性兜底判断，确保event、event.start、event.end都有有效值之后再执行日期判断逻辑，修改后的参考代码如下：

<p>
  {event?.start && event?.end 
    ? (isSameDay(new Date(event.start), new Date(event.end)) 
      ? `On ${format(new Date(event.start), 'LLL do')}`
      : `From ${format(new Date(event.start), 'LLL do')} to ${format(new Date(event.end), 'LLL do')}`)
    : '日期待更新'
  }
</p>

你还可以根据业务场景选择额外的兜底方案：

• 给组件的event参数设置默认空对象，避免解构时报错：

  const EventsCard = ({ event = {} }) => {
    // 组件逻辑
  }
  

• 组件最外层先判断event是否合法，不合法直接返回占位内容/骨架屏：

  if (!event?.start || !event?.end) {
    return <div className="event-card-placeholder"></div>
  }
  

• 如果event数据是仅在客户端请求获取的，可以把组件设置为不参与服务端渲染：

  import dynamic from 'next/dynamic'
  const EventsCard = dynamic(() => import('./EventsCard'), { ssr: false })
  

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