无法读取 NextJS 服务器中未定义的属性“indexOf”

Posted 2023-03-10

技术标签:

【中文标题】无法读取 NextJS 服务器中未定义的属性“indexOf”【英文标题】：Cannot read property 'indexOf' of undefined in NextJS server 【发布时间】：2020-09-03 05:49:23 【问题描述】：

我的 Next JS 网站运行良好，有一天，当我尝试从这里 https://www.apollographql.com/docs/link/links/rest/#gatsby-focus-wrapper 安装 Apollo Rest 时，我开始遇到很多错误。我放弃了 packages.json 中的任何更改，删除了 packages-lock.json、node_modules 以及灰尘文件和文件夹。但不断收到下一个错误：

GraphQL error occurred [getDataFromTree] TypeError: Cannot read property 'indexOf' of undefined
    at addBasePath (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2966:15)
    at F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2464:40
    at Link.formatUrls (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2388:18)
    at Link.render (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2588:14)
    at processChild (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3134:18)
    at resolve (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
    at renderToStaticMarkup (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:4004:27)
    at process (F:\Projects\breadcrumps\showcase\node_modules\@apollo\react-s-s-r\lib\react-s-s-r.cjs.js:38:16)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
TypeError: Cannot read property 'indexOf' of undefined
    at addBasePath (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2966:15)
    at F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2464:40
    at Link.formatUrls (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2388:18)
    at Link.render (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2588:14)
    at processChild (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3134:18)
    at resolve (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
    at renderToString (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
    at render (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:83:16)
    at renderPage (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:415:16)
    at Object.ctx.renderPage (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\_document.js:905:30)
    at Function.getInitialProps (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\_document.js:247:19)
    at Function.getInitialProps (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\_document.js:916:85)
    at Object.loadGetInitialProps (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\lib\utils.js:59:29)
    at Object.renderTohtml (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:419:36)
Error: "CustomDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.
    at Object.loadGetInitialProps (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\lib\utils.js:65:15)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Object.renderToHTML (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\render.js:419:22)
    at async DevServer.renderToHTMLWithComponents (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:654:26)
    at async DevServer.renderToHTML (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:801:28)
    at async DevServer.renderToHTML (F:\Projects\breadcrumps\showcase\node_modules\next\dist\server\next-dev-server.js:22:539)
    at async DevServer.render (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:546:22)
    at async Object.fn (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:396:17)
    at async Router.execute (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\router.js:134:32)
    at async DevServer.run (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:511:29)
    at async DevServer.handleRequest (F:\Projects\breadcrumps\showcase\node_modules\next\dist\next-server\server\next-server.js:147:20)

任何解决这个烦人问题的提示，我将不胜感激。

【问题讨论】：

【参考方案1】：

我发现问题出在哪里，我的一个网站链接获得了未定义的值。我正在使用“下一个/链接”组件。但是，对于传递给该链接的未定义 URL，获取所有这三个例外是不合逻辑的。我认为 NextJS 开发团队应该更多地审查他们如何记录异常。即使我为该组件传递了 undefined ，也应该对此进行检查，而不是整个网站都应该关闭。

【讨论】：

nextjs 日志记录在我看来是可怕的【参考方案2】：

这可能不适用于您安装的 Apollo，但我遇到了同样的错误，因为我使用 react-router-dom 语法来表示 Link：

 <Link to="/home">

将其更改为 NextJs 语法为我修复了它：

  <Link href="/home">

NextJs 文档在这里： https://nextjs.org/learn/basics/navigate-between-pages/link-component

【讨论】：

【参考方案3】：

对于搜索此错误的其他人，当我将 Link 作为道具传递给 Material-UI ListItem 时，我得到了一个先前用于在组件道具中传递 react-router-dom 链接的情况：

<ListItem
    key=page.title
    activeClassName=classes.activeListItem
    className=classes.listItem
    to=page.href
    component=Link
>

并且可以改为：

<Link href=page.href>
    <ListItem
        key=page.title
        activeClassName=classes.activeListItem
        className=classes.listItem
    >
</Link>

【讨论】：

以上是关于无法读取 NextJS 服务器中未定义的属性“indexOf”的主要内容，如果未能解决你的问题，请参考以下文章

NextJS：未捕获的类型错误：无法读取未定义的属性（读取“属性”）

NextJS：“TypeError：无法读取未定义的属性‘toLowerCase’”

Nextjs - multer - TypeError：无法读取未定义的属性“传输编码”

NextJS：TypeError：无法读取未定义的属性“json”

TypeError：无法使用拦截器读取 Angular 中未定义的属性“数据”

TypeError：无法读取反应js中未定义的属性'fn'