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.
P粉128563140
P粉128563140 2024-03-28 11:50:32
0
1
488

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 ?

P粉128563140
P粉128563140

répondre à tous(1)
P粉647449444

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal