NextJS - 应用程序错误：发生客户端异常

Question

我以前从未收到过这样的错误

我有一个定义用于进行 API 调用的函数的文件，目前我正在从环境变量中读取端点基本 URL：

/**
 * Prepended to request URL indicating base URL for API and the API version
 */
 const VERSION_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}`

我尝试快速解决问题，因为环境变量未正确加载，方法是对 URL 进行硬编码，以防变量未定义。

/**
 * Prepended to request URL indicating base URL for API and the API version
 */
 const VERSION_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hardcodedURL.com'}/${process.env.NEXT_PUBLIC_API_VERSION || 'v1'}`

在开发和生产模式下，当在我的本地计算机上运行时，它工作正常（docker 容器）。但是，一旦将其投入生产，我就会看到以下屏幕：

这是控制台输出：

framework-bb5c596eafb42b22.js:1 TypeError: Path must be a string. Received undefined
    at t (137-10e3db828dbede8a.js:46:750)
    at join (137-10e3db828dbede8a.js:46:2042)
    at J (898-576b101442c0ef86.js:1:8158)
    at G (898-576b101442c0ef86.js:1:10741)
    at oo (framework-bb5c596eafb42b22.js:1:59416)
    at Wo (framework-bb5c596eafb42b22.js:1:68983)
    at Ku (framework-bb5c596eafb42b22.js:1:112707)
    at Li (framework-bb5c596eafb42b22.js:1:98957)
    at Ni (framework-bb5c596eafb42b22.js:1:98885)
    at Pi (framework-bb5c596eafb42b22.js:1:98748)
cu @ framework-bb5c596eafb42b22.js:1
main-f51d4d0442564de3.js:1 TypeError: Path must be a string. Received undefined
    at t (137-10e3db828dbede8a.js:46:750)
    at join (137-10e3db828dbede8a.js:46:2042)
    at J (898-576b101442c0ef86.js:1:8158)
    at G (898-576b101442c0ef86.js:1:10741)
    at oo (framework-bb5c596eafb42b22.js:1:59416)
    at Wo (framework-bb5c596eafb42b22.js:1:68983)
    at Ku (framework-bb5c596eafb42b22.js:1:112707)
    at Li (framework-bb5c596eafb42b22.js:1:98957)
    at Ni (framework-bb5c596eafb42b22.js:1:98885)
    at Pi (framework-bb5c596eafb42b22.js:1:98748)
re @ main-f51d4d0442564de3.js:1
main-f51d4d0442564de3.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
re @ main-f51d4d0442564de3.js:1

查看 t 处的源代码(137-10e3db828dbede8a.js:46:750)

我完全不知道这意味着什么或正在发生什么。为什么对路径的字符串进行硬编码会导致此客户端错误？缺乏可读的源代码使我无法理解正在发生的事情。

快速谷歌搜索建议我应该升级一些软件包，但错误是如此模糊，我什至不确定哪个软件包出现了问题。

这是版本 URL 路径的大致使用方式

framework-bb5c596eafb42b22.js:1 TypeError: Path must be a string. Received undefined
    at t (137-10e3db828dbede8a.js:46:750)
    at join (137-10e3db828dbede8a.js:46:2042)
    at J (898-576b101442c0ef86.js:1:8158)
    at G (898-576b101442c0ef86.js:1:10741)
    at oo (framework-bb5c596eafb42b22.js:1:59416)
    at Wo (framework-bb5c596eafb42b22.js:1:68983)
    at Ku (framework-bb5c596eafb42b22.js:1:112707)
    at Li (framework-bb5c596eafb42b22.js:1:98957)
    at Ni (framework-bb5c596eafb42b22.js:1:98885)
    at Pi (framework-bb5c596eafb42b22.js:1:98748)
cu @ framework-bb5c596eafb42b22.js:1
main-f51d4d0442564de3.js:1 TypeError: Path must be a string. Received undefined
    at t (137-10e3db828dbede8a.js:46:750)
    at join (137-10e3db828dbede8a.js:46:2042)
    at J (898-576b101442c0ef86.js:1:8158)
    at G (898-576b101442c0ef86.js:1:10741)
    at oo (framework-bb5c596eafb42b22.js:1:59416)
    at Wo (framework-bb5c596eafb42b22.js:1:68983)
    at Ku (framework-bb5c596eafb42b22.js:1:112707)
    at Li (framework-bb5c596eafb42b22.js:1:98957)
    at Ni (framework-bb5c596eafb42b22.js:1:98885)
    at Pi (framework-bb5c596eafb42b22.js:1:98748)
re @ main-f51d4d0442564de3.js:1
main-f51d4d0442564de3.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
re @ main-f51d4d0442564de3.js:1

Answer 1

根据我的经验，出现此问题的原因有多种。最常见的原因是当数据来自 API 时，您没有正确放置数据访问检查器。有时我们在浏览器中看不到这些东西，但在部署时它会给出这样的错误。

\n

例如：

\n

const response = fetch("some_url");\nconst companyId = response.data.companyId; \xe2\x9d\x8c\nconst companyId = response?.data?.companyId; \xe2\x9c\x94\xef\xb8\x8f\n

\n