Selepas mengemas kini pakej atau menukar yarn.lock, panggilan API NextJS berfungsi seperti biasa dalam persekitaran pembangunan, tetapi gagal dalam persekitaran pengeluaran.

Question

Atas sebab tertentu, API memanggil NextJS saya (yang dihoskan pada Vercel) gagal dalam pengeluaran selepas mengemas kini pakej atau menala semula yarn.lock. Setiap panggilan API (walaupun dunia helo yang mudah) mengembalikan HTML serupa dengan fail indeks. Pakej yang menyebabkan isu ini sedang mengemas kini Mantine, yang merupakan perpustakaan UI pelanggan. Walau bagaimanapun, saya perhatikan bahawa masalah ini kini berlaku walaupun saya mengunci semua pakej ke nombor versi tertentu dan yarn.lock tidak berubah sama sekali.

Ini adalah ralat yang saya perolehi dalam log Vercel, tetapi ia tidak benar-benar membantu kerana Memberstack ialah pakej pelanggan dan bertanggungjawab untuk menguruskan pengesahan kami. Dan saya hanya menggunakan pakej ini pada halaman pelanggan.

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

Fail

package.json adalah seperti berikut:

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

Saya cuba mengalih keluar yarn.lock dan memasang semula semua pakej, tetapi ini juga menyebabkan ralat pada panggilan API dalam pengeluaran. Satu-satunya perkara yang berfungsi ialah menyalin terus fail yarn.lock yang sama yang berfungsi dalam pengeluaran sebelum ini dan menggunakannya semasa digunakan.

Jadi pada asasnya, saya tidak boleh menyentuh fail yarn.lock tanpa melanggar persekitaran pengeluaran, atau saya hanya boleh menyentuh pakej tertentu.

Saya cuba memikirkan jika terdapat sesuatu yang salah dengan pakej yang saya pasang, adakah sesuatu yang perlu saya lakukan pada benang semasa memasang/menaik taraf pakej? Atau adakah ini isu keserasian antara NextJS dan beberapa pakej yang saya gunakan?

Answer 1

kelihatan seperti /var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5 正试图访问 window, namun memandangkan NextJS melakukan pemaparan sisi pelayan (SSR) kemungkinan besar ia tidak ditentukan.

Saya mengesyorkan menambah typeof window === undefined sebelum memanggil tetingkap, atau menggunakan pakej dinamik NextJS dan melumpuhkan SSR apabila mengimport memberstack.