Aus irgendeinem Grund schlagen die API-Aufrufe für mein NextJS (gehostet auf Vercel) in der Produktion fehl, nachdem Pakete aktualisiert oder Yarn.lock neu optimiert wurden. Jeder API-Aufruf (sogar ein einfaches „Hello World“) gibt HTML ähnlich der Indexdatei zurück. Das Paket, das dieses Problem verursacht, ist die Aktualisierung von Mantine, einer Client-UI-Bibliothek. Allerdings ist mir aufgefallen, dass dieses Problem jetzt auch dann auftritt, wenn ich alle Pakete auf eine bestimmte Versionsnummer sperre und sich „garn.lock“ überhaupt nicht ändert.
Das ist der Fehler, den ich in den Vercel-Protokollen erhalte, aber er hilft nicht wirklich, da Memberstack ein Client-Paket ist und für die Verwaltung unserer Authentifizierung verantwortlich ist. Und ich verwende dieses Paket nur auf Clientseiten.
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
Die Datei package.json lautet wie folgt:
"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"
}
Ich habe versucht, Yarn.lock zu entfernen und alle Pakete neu zu installieren, aber das verursachte auch Fehler bei API-Aufrufen in der Produktion. Das Einzige, was funktioniert, ist, die gleiche „garn.lock“-Datei, die zuvor in der Produktion funktionierte, direkt zu kopieren und bei der Bereitstellung zu verwenden.
Im Grunde genommen kann ich die Datei „garn.lock“ nicht anfassen, ohne die Produktionsumgebung zu beschädigen, oder ich kann nur bestimmte Pakete anfassen.
Ich versuche herauszufinden, ob mit den von mir installierten Paketen etwas nicht stimmt. Muss ich bei der Installation/Aktualisierung der Pakete etwas an Garn tun? Oder handelt es sich hierbei um ein Kompatibilitätsproblem zwischen NextJS und einigen von mir verwendeten Paketen?
看起来像是
/var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5正试图访问window，然而由于 NextJS 进行了服务器端渲染 (SSR)，它很可能是未定义的。我建议在调用 window 之前添加
typeof window === undefined，或者使用 NextJS 的 dynamic package 并在导入 memberstack 时禁用 SSR。