由于某种原因,我的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与我使用的某些软件包之间的兼容性问题?
看起来像是
/var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5
正试图访问window
,然而由于 NextJS 进行了服务器端渲染 (SSR),它很可能是未定义的。我建议在调用 window 之前添加
typeof window === undefined
,或者使用 NextJS 的 dynamic package 并在导入 memberstack 时禁用 SSR。