Error when deploying on vercel

[VanessaDiBella]

We created a database which we finished. we are currently in our PR Vercel shows us some errors with the deployment. We haven't found the error since then. Do you have any suggestions for us?

[ahohnsen]

Hi Vanessa!

Unfortunately, the resolution of the screenshot is not good enough to read the error messages. 🙁

Have you set all the necessary environment variables for your Vercel deployment?
If not, make sure to set them and redeploy after you updated them.

[EmmaDir]

The error says "exercises is not defined". Exercises are the data from mongoDB. Everything works on localhost and the environment variables are set correctly

[VanessaDiBella]

At first we also had the same error message on our localhost and we resolved the problem there, but it's still not working on vercel, even after redeploying.
the error message is also something like :
[11:46:14.539] Running build in Washington, D.C., USA (East) – iad1
[11:46:15.379] Cloning github.com/jukrams/workout-planner (Branch: feature/database, Commit: 6f56365)
[11:46:15.388] Skipping build cache, deployment was triggered without cache.
[11:46:18.860] Cloning completed: 3.481s
[11:46:19.567] Running "vercel build"
[11:46:20.552] Vercel CLI 36.0.0
[11:46:21.364] Installing dependencies...
[11:46:32.311] npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
[11:46:34.232] npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
[11:46:34.406] npm warn deprecated glob@7.1.7: Glob versions prior to v9 are no longer supported
[11:46:34.825] npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
[11:46:35.344] npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
[11:46:36.057] npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
[11:46:36.126] npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
[11:46:52.053] - info Linting and checking validity of types...
[11:46:54.367] - info Creating an optimized production build...
[11:47:06.822] - info Compiled successfully
[11:47:06.823] - info Collecting page data...
[11:47:18.776] - info Generating static pages (0/8)
[11:47:18.845] - info Generating static pages (2/8)
[11:47:18.858] TypeError: Cannot read properties of undefined (reading 'find')
[11:47:18.858] at EditPage (/vercel/path0/.next/server/pages/workouts/[id]/edit.js:126:36)
[11:47:18.858] at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
[11:47:18.858] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
[11:47:18.858] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[11:47:18.858] at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
[11:47:18.858] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
[11:47:18.862] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[11:47:18.862] at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
[11:47:18.862] at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
[11:47:18.862] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
[11:47:18.863]
[11:47:18.863] Error occurred prerendering page "/workouts/[id]/edit". Read more: https://nextjs.org/docs/messages/prerender-error
[11:47:18.863] TypeError: Cannot read properties of undefined (reading 'find')
[11:47:18.863] at EditPage (/vercel/path0/.next/server/pages/workouts/[id]/edit.js:126:36)
[11:47:18.863] at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
[11:47:18.863] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
[11:47:18.863] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[11:47:18.863] at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
[11:47:18.863] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
[11:47:18.863] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[11:47:18.863] at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
[11:47:18.863] at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
[11:47:18.864] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
[11:47:18.864] - info Generating static pages (4/8)
[11:47:18.886] - info Generating static pages (6/8)
[11:47:18.903] - info Generating static pages (8/8)
[11:47:18.905]
[11:47:18.906] > Export encountered errors on following paths:
[11:47:18.906] /workouts/[id]/edit
[11:47:18.951] Error: Command "npm run build" exited with 1

[ahohnsen]

I took a closer look at your app. When you try to edit a workout—meaning you’re on the edit page—and then reload the page, an error occurs saying that workouts is undefined.

When you refresh the edit page, the browser makes a full HTTP request to the server for that specific URL. This results in a fresh load of the entire page:

• The useSWR hooks start fetching data asynchronously from their respective APIs, but initially, the data is undefined until the fetch completes.
• During this time, if your component tries to access workouts or exercises while they are still undefined, you will encounter errors.

I suggest to add an early return to ensure that your component does not try to access data that is not yet available:

 if (!id || !workouts || !exercises) {
    return <p>Loading...</p>;
  }