After updating the package or changing yarn.lock, NextJS API calls work normally in the development environment, but fail in the production environment.

Question

For some reason, the API calls for my NextJS (hosted on Vercel) fail in production after updating packages or re-tuning yarn.lock. Every API call (even a simple hello world) returns HTML similar to the index file. The package causing this issue is updating Mantine, which is a client UI library. However, I noticed that this issue now occurs even if I lock all packages to a specific version number and yarn.lock does not change at all.

This is the error I get in the Vercel logs, but it doesn't really help because Memberstack is a client package that is responsible for managing our authentication. And I only use this package on client pages.

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

package.json file is as follows:

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

I tried removing yarn.lock and reinstalling all packages, but this also caused errors on the API calls in production. The only thing that works is to directly copy the same yarn.lock file that was working in production before and use it when deploying.

So basically, I can't touch the yarn.lock file or it will break the production environment, or I can only touch certain packages.

I'm trying to figure out if there's something wrong with the packages I installed, is there something I need to do on yarn when installing/upgrading the packages? Or is this a compatibility issue between NextJS and some packages I'm using?

Answer 1

Looks like /var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5 is trying to access window, however due to NextJS Server Side Rendering (SSR) is done and it is most likely undefined.

I recommend adding typeof window === undefined before calling window, or using NextJS's dynamic package and disabling SSR when importing memberstack.