Next.js应用部署Vercel失败，报react/display-name错误如何修复？

react/display-name是ESLint的React规则，要求所有组件都需要声明显式的显示名称。你复制的_document.js示例中使用了匿名箭头函数作为包装组件，没有声明显示名称，Vercel部署阶段默认会执行ESLint校验，因此触发报错。

方案1：给匿名组件声明displayName（推荐） #

修改pages/_document.js中getInitialProps方法内的匿名组件部分：
原错误写法示例：

ctx.renderPage = () =>
  originalRenderPage({
    // 此处为匿名组件，触发规则校验
    enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
  })

修改后写法：

ctx.renderPage = () =>
  originalRenderPage({
    enhanceApp: (App) => {
      // 给组件命名并声明displayName
      const StyledAppWrapper = (props) => sheet.collectStyles(<App {...props} />)
      StyledAppWrapper.displayName = 'StyledAppWrapper'
      return StyledAppWrapper
    },
  })

修改后重新部署即可通过校验。

方案2：关闭对应ESLint规则 #

如果不需要该规则校验，可选择两种关闭方式：

• 项目全局关闭：在根目录.eslintrc.json的rules字段中添加配置：

{
  "rules": {
    "react/display-name": "off"
  }
}

• 部署临时关闭：在Vercel项目环境变量中新增DISABLE_ESLINT_PLUGIN=true，或修改package.json的build命令为next build --no-lint。

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