Question

更新：从_document注释掉这部分确实可以解决问题，但是为什么呢？

<Link href={`/search`} prefetch={false}>
                <a
                    className="d-inline-block text-center"
                    style={{ textDecoration: 'none', color: darkColor }}
                >
                    <Search
                        width="23px"
                        height="23px"
                        color={darkColor}
                        style={{ display: 'block', margin: '0 auto' }}
                    />
                    <div className="icon-lbl">
                        <span>search</span>
                    </div>
                </a>
            </Link>

我昨天像往常一样在生产和开发阶段将网站部署到了AWS。它在生产站点上一直失败，但是在开发站点上运行良好。虽然是相同的代码。

这是唯一重复出现的错误：

web-app_1  | TypeError: Cannot read property 'pathname' of null
web-app_1  |     at Link (webpack-internal:///./node_modules/next/dist/client/link.js:159:14)
web-app_1  |     at processChild (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
web-app_1  |     at resolve (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
web-app_1  |     at ReactDOMServerRenderer.render (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
web-app_1  |     at ReactDOMServerRenderer.read (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
web-app_1  |     at renderToStaticMarkup (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:4004:27)
web-app_1  |     at renderDocument (/usr/src/app/node_modules/next/dist/next-server/server/render.js:3:594)
web-app_1  |     at renderToHTML (/usr/src/app/node_modules/next/dist/next-server/server/render.js:47:72)
web-app_1  |     at runMicrotasks (<anonymous>)
web-app_1  |     at processTicksAndRejections (internal/process/task_queues.js:97:5)
web-app_1  |     at async /usr/src/app/node_modules/next/dist/next-server/server/next-server.js:71:285
web-app_1  |     at async /usr/src/app/node_modules/next/dist/next-server/server/next-server.js:70:142
web-app_1  |     at async DevServer.renderToHTMLWithComponents (/usr/src/app/node_modules/next/dist/next-server/server/next-server.js:92:300)
web-app_1  |     at async DevServer.renderToHTML (/usr/src/app/node_modules/next/dist/next-server/server/next-server.js:93:255)
web-app_1  |     at async DevServer.renderToHTML (/usr/src/app/node_modules/next/dist/server/next-dev-server.js:30:578)
web-app_1  |     at async DevServer.render (/usr/src/app/node_modules/next/dist/next-server/server/next-server.js:50:236)
web-app_1  |     at async Object.fn (/usr/src/app/node_modules/next/dist/next-server/server/next-server.js:35:306)
web-app_1  |     at async Router.execute (/usr/src/app/node_modules/next/dist/next-server/server/router.js:38:67)
web-app_1  |     at async DevServer.run (/usr/src/app/node_modules/next/dist/next-server/server/next-server.js:44:494)
web-app_1  |     at async DevServer.handleRequest (/usr/src/app/node_modules/next/dist/next-server/server/next-server.js:13:101)

我尝试的是回滚到以前的版本，不幸的是没有任何更改。

感谢您的帮助！

Answer 1

更新：在许多nextjs开发人员中，这似乎是一个流行的问题。可能是因为最新版本中引入了更改。检查此PR： https://github.com/vercel/next.js/pull/15604

应该很快就会上线。

只需将所有链接项更改为普通锚元素即可解决该问题，如下所示：

        <a
            className="d-inline-block text-center"
            style={{ textDecoration: 'none', color: darkColor }}
            href="/search"
        >
            <Search
                width="23px"
                height="23px"
                color={darkColor}
                style={{ display: 'block', margin: '0 auto' }}
            />
            <div className="icon-lbl">
                <span>search</span>
            </div>
        </a>

如果您找到此问题的起因，请告诉我。

TypeError：无法读取null的属性“路径名”

1 个答案: