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 INCASE，未定义变量。

/**
 * 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-10e3db8282828dbede8a.js：46：750）查看源 strong>

的来源，

我完全失去了这意味着什么或正在发生的事情。为什么在该端端错误中为路径的字符串中的硬编码会导致？缺乏可读的源代码使我无法理解正在发生的事情。

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

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

 /**
  * Send a get request to a given endpoint
  *
  * **Returns a Promise**
  */
 function GET(token, data, parent, api) {
   return new Promise((resolve, reject) => {
     try {
       let req = new XMLHttpRequest()
 
       let endpoint = `${VERSION_URL}/${parent}/${api}` // base url with the params not included
       let params = new URLSearchParams() // URLSearchParams used for adding params to url

       // put data in GET request params
       for (const [key, value] of Object.entries(data)) {
         params.set(key, value)
       }
 
       let query_url = endpoint + "?" + params.toString() // final query url
 
       req.open("GET", query_url, true)
       req.setRequestHeader("token", token) // put token into header
  
       req.onloadend = () => {
         if (req.status === 200) {
           // success, return response
           resolve([req.response, req.status])
         } else {
           reject([req.responseText, req.status])
         }
       }
 
       req.onerror = () => {
         reject([req.responseText, req.status])
       }
 
       req.send()
     } catch (err) {
       reject(["Exception", 0])
     }
   })
 }

Answer 1

根据我的经验，这个问题可能出于多种原因而发生。最常见的是，因为当数据来自API时，您没有正确访问Checker的数据。有时，我们在浏览器中看不到的事情，但是部署时会出现这种错误。

例如：

const response = fetch("some_url");
const companyId = response.data.companyId; ❌
const companyId = response?.data?.companyId; ✔️

Answer 2

当我更改[locale] en的路径时，这发生在我身上。希望这有帮助！