在更新套件或更改yarn.lock後,NextJS的API呼叫在開發環境正常,但在生產環境失效
P粉128563140
P粉128563140 2024-03-28 11:50:32
0
1
491

由於某種原因,我的NextJS(託管在Vercel上)的API呼叫在更新軟體包或重新調整yarn.lock後在生產環境中失敗。每個API呼叫(甚至一個簡單的hello world)都會傳回類似索引檔的HTML。導致此問題的軟體包是更新Mantine,這是一個客戶端UI庫。然而,我注意到即使我將所有軟體包鎖定到特定版本號,並且yarn.lock根本不改變,這個問題現在也會發生。

這是我在Vercel日誌中收到的錯誤,但它並沒有真正幫助,因為Memberstack是客戶端包,負責管理我們的身份驗證。而且我只在客戶端頁面上使用這個套件。

info  - Loaded env from /var/task/.env
Memberstack React has initialized
Unhandled Promise Rejection     {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"ReferenceError: window is not defined","reason":{"errorType":"ReferenceError","errorMessage":"window is not defined","stack":["ReferenceError: window is not defined","    at /var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5","    at new Promise (<anonymous>)","    at Object.<anonymous> (/var/task/node_modules/@memberstack/dom/lib/methods/index.js:43:27)","    at Module._compile (node:internal/modules/cjs/loader:1218:14)","    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)","    at Module.load (node:internal/modules/cjs/loader:1081:32)","    at Module._load (node:internal/modules/cjs/loader:922:12)","    at Module.require (node:internal/modules/cjs/loader:1105:19)","    at require (node:internal/modules/cjs/helpers:103:18)","    at Object.<anonymous> (/var/task/node_modules/@memberstack/dom/lib/index.js:6:33)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: ReferenceError: window is not defined","    at process.<anonymous> (file:///var/runtime/index.mjs:1188:17)","    at process.emit (node:events:525:35)","    at emit (node:internal/process/promises:149:20)","    at processPromiseRejections (node:internal/process/promises:283:27)","    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
Unknown application error occurred
Runtime.Unknown

package.json檔案如下:

"dependencies": {
    "@amplitude/analytics-browser": "^1.9.3",
    "@emotion/react": "^11.10.6",
    "@emotion/server": "^11.10.0",
    "@heroicons/react": "^2.0.17",
    "@mantine/carousel": "^6.0.6",
    "@mantine/core": "^6.0.6",
    "@mantine/hooks": "^6.0.6",
    "@mantine/next": "^6.0.6",
    "@mantine/notifications": "^6.0.6",
    "@memberstack/react": "^2.0.1",
    "@types/node": "18.15.11",
    "@types/react": "18.0.33",
    "@types/react-dom": "18.0.11",
    "airtable": "^0.11.6",
    "autoprefixer": "10.4.14",
    "axios": "^1.3.5",
    "embla-carousel-react": "^7.1.0",
    "eslint": "8.37.0",
    "eslint-config-next": "13.3.0",
    "next": "13.3.0",
    "postcss": "8.4.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.3"
  }

我嘗試刪除yarn.lock並重新安裝所有軟體包,但這也會導致生產環境中的API呼叫出錯。唯一有效的方法是直接複製先前在生產環境中工作的相同yarn.lock文件,並在部署時使用它。

所以基本上,我不能碰yarn.lock文件,否則會破壞生產環境,或只能觸碰某些軟體包。

我正在努力弄清楚我安裝的軟體包是否有問題,當安裝/升級軟體包時,是否需要在yarn上執行某些操作?或者這是NextJS與我使用的某些軟體包之間的相容性問題?

P粉128563140
P粉128563140

全部回覆(1)
P粉647449444

看起來像是/var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5 正試圖存取window#,然而由於NextJS進行了伺服器端渲染(SSR),它很可能是未定義的。

我建議在呼叫 window 之前加上 typeof window === undefined,或使用 NextJS 的 dynamic package 並在匯入 memberstack 時停用 SSR。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板