Après avoir mis à jour le package ou modifié Yarn.lock, les appels d'API NextJS fonctionnent normalement dans l'environnement de développement, mais échouent dans l'environnement de production.

Question

Pour une raison quelconque, les appels API pour mon NextJS (hébergé sur Vercel) échouent en production après la mise à jour des packages ou le réajustement de Yarn.lock. Chaque appel d'API (même un simple hello world) renvoie un code HTML similaire au fichier d'index. Le package à l'origine de ce problème met à jour Mantine, qui est une bibliothèque d'interface utilisateur client. Cependant, j'ai remarqué que ce problème se produit maintenant même si je verrouille tous les packages sur un numéro de version spécifique et que fil.lock ne change pas du tout.

C'est l'erreur que j'obtiens dans les journaux Vercel, mais cela n'aide pas vraiment car Memberstack est un package client et est responsable de la gestion de notre authentification. Et je n'utilise ce package que sur les pages clients.

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

Le fichier

package.json est le suivant :

"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"
  }

J'ai essayé de supprimer fil.lock et de réinstaller tous les packages, mais cela a également provoqué des erreurs sur les appels d'API en production. La seule chose qui fonctionne est de copier directement le même fichier Yarn.lock qui fonctionnait auparavant en production et de l'utiliser lors du déploiement.

Donc, en gros, je ne peux pas toucher au fichier Yarn.lock sans casser l'environnement de production, ou je ne peux toucher qu'à certains packages.

J'essaie de comprendre s'il y a un problème avec les packages que j'ai installés, dois-je faire quelque chose sur Yarn lors de l'installation/mise à niveau des packages ? Ou s'agit-il d'un problème de compatibilité entre NextJS et certains packages que j'utilise ?

Answer 1

ressemble à /var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5 正试图访问 window, mais comme NextJS effectue le rendu côté serveur (SSR), il est probablement indéfini.

Je recommande d'ajouter typeof window === undefined avant d'appeler la fenêtre, ou d'utiliser le package dynamique de NextJS et de désactiver SSR lors de l'importation de la pile de membres.