出于某种原因,我的NextJS(托管在Vercel上)API调用在包更新或重新调整yarn锁后在生产中失败。每个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
什么包。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,它可能未定义。
我建议在调用窗口或使用next的动态包添加typeof window === undefined
,并在导入memberstack时禁用SSR