For some reason my NextJS (hosted on Vercel) API calls are failing in production after a package update or rejigging the yarn lock. Every API call (even a simple hello world) is returning HTML like the index file. The package that started the issue is updating Mantine which is a client-side UI library. However, I've noticed this issue now occurs even if I keep all the packages locked to a specific version number and the yarn.lock changes at all.
This is the error I get in my Vercel logs but it doesn't really help since Memberstack is a client-side package that manages auth for us. And I only use the package on client-side 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
What the package.json looks like:
"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've attempted deleting the yarn.lock and reinstalling all the packages, but that breaks API calls in production as well. The only thing that works is literally copying the same yarn.lock file that worked previously in production and using that when deploying.
So basically I'm stuck with not touching the yarn.lock file ever or touching certain packages otherwise production breaks.
I'm trying to figure out if there's an issue with the packages I'm installing, is there something I need to do with yarn when installing/upgrading the packages? Or is this some compatibility issue between NextJS and some of the packages I'm using?
It seems like /var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5 is trying to access window however because NextJS does SSR, it is likely undefined.
I suggest adding typeof window === undefined above the call to window OR using the dynamic package from next and disabling SSR when importing memberstack