Next JS v11.1.2部署Vercel报错TypeError: c.props.href.startsWith求助

根因说明 #

该报错是Next.js 11.1.2版本Head组件的内置校验逻辑触发的，makeStylesheetInert方法会遍历Head内所有带href属性的标签，调用href.startsWith判断资源类型，当href为非字符串类型（undefined、null、对象等）时，就会抛出该错误。

本地build正常但Vercel部署报错的核心差异是服务端渲染场景的变量取值：配置getServerProps后页面走SSR逻辑，服务端渲染时动态href的取值和本地静态编译时的取值不一致，才会出现本地无问题但线上崩溃的情况。

排查与解决方案 #

• 全局检索所有放在next/head组件内的带href属性的标签，包括link标签、a标签、样式引入标签，校验每个href的赋值逻辑：如果是动态绑定的变量，确保渲染时一定是字符串类型，可添加兜底逻辑，比如href={dynamicHref ?? ''}避免出现非字符串值。
• 重点排查升级Next.js版本前后改动的Head相关代码，Next.js 11.1.2对Head组件的样式预处理逻辑做了更新，此前的版本没有该校验逻辑，老版本正常运行的代码升级后可能触发该报错。
• 若暂时找不到具体出错的标签，可通过两种方案临时修复：一是将Next.js版本降级到11.1.0，该版本没有新增makeStylesheetInert校验逻辑，可直接兼容老代码；二是在next.config.js中添加配置experimental: { strictNextHead: false }，关闭新版Head的严格校验逻辑，绕过报错。

完整报错日志 #

2021-10-08T10:07:17.293Z    ecec99d6-6889-4855-9178-b2303c450259    ERROR   TypeError: c.props.href.startsWith is not a function
    at /var/task/.next/server/chunks/859.js:785:29
    at Array.some (<anonymous>)
    at /var/task/.next/server/chunks/859.js:783:87
    at /var/task/node_modules/react/cjs/react.production.min.js:17:388
    at O (/var/task/node_modules/react/cjs/react.production.min.js:16:230)
    at O (/var/task/node_modules/react/cjs/react.production.min.js:17:44)
    at Object.P [as map] (/var/task/node_modules/react/cjs/react.production.min.js:17:355)
    at Head.makeStylesheetInert (/var/task/.next/server/chunks/859.js:782:36)
    at Head.render (/var/task/.next/server/chunks/859.js:839:23)
    at d (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231)
2021-10-08T10:07:17.294Z    ecec99d6-6889-4855-9178-b2303c450259    ERROR   TypeError: c.props.href.startsWith is not a function
    at /var/task/.next/server/chunks/859.js:785:29
    at Array.some (<anonymous>)
    at /var/task/.next/server/chunks/859.js:783:87
    at /var/task/node_modules/react/cjs/react.production.min.js:17:388
    at O (/var/task/node_modules/react/cjs/react.production.min.js:16:230)
    at O (/var/task/node_modules/react/cjs/react.production.min.js:17:44)
    at Object.P [as map] (/var/task/node_modules/react/cjs/react.production.min.js:17:355)
    at Head.makeStylesheetInert (/var/task/.next/server/chunks/859.js:782:36)
    at Head.render (/var/task/.next/server/chunks/859.js:839:23)
    at d (/var/task/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231) {
  page: '/'
}
RequestId: ecec99d6-6889-4855-9178-b2303c450259 Error: Runtime exited with error: exit status 1
Runtime.ExitError

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