TypeError (Error): Cannot read properties of undefined (reading 'nutrients')

[Abhiek187]

On all the apps, after clicking the find recipe button, the above error is returned from the server. I wasn't able to reproduce this locally, but I was able to reproduce it on Docker, so I'll look into what the issue is. I recently updated the server to pass the API key in the headers, so could that have something to do with this bug? The API itself seems to be working fine on Postman.

[Abhiek187]

This is the full stack trace for reference:

TypeError: Cannot read properties of undefined (reading 'nutrients')
      at createClientResponse (/usr/src/server/dist/utils/recipeUtils.js:69:47)
      at /usr/src/server/dist/routes/recipes.js:102:66
      at step (/usr/src/server/dist/routes/recipes.js:33:23)
      at Object.next (/usr/src/server/dist/routes/recipes.js:14:53)
      at fulfilled (/usr/src/server/dist/routes/recipes.js:5:58)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

And this is the offending line in createClientResponse:

var _a = recipe.nutrition, nutrients = _a.nutrients, ingredients = _a.ingredients;

[Abhiek187]

The data property from the Axios response is returning binary data instead of JSON.

const recipes = recipeResponse.data;

And I believe this causes recipes to become a string instead of an object. So, in createClientResponse:

let recipe: RecipeResponse;

if (recipes.hasOwnProperty("results")) {
  recipe = (recipes as SearchResponse).results[0];
} else {
  recipe = recipes as RecipeResponse;
}

const { nutrients, ingredients } = recipe.nutrition;

recipes.hasOwnProperty returns false, so recipe becomes recipes (which is incorrect since the random recipe endpoint should return results). recipe.nutrition is the first time we're referencing a property in recipe. But since recipe is a string, recipe.nutrition becomes undefined, ultimately causing the error we're getting.

[Abhiek187]

This could be an Axios bug. This is the output of npm list on Docker:

ez-recipes-server@1.0.0 /usr/src/server
+-- @types/cors@2.8.12
+-- @types/express@4.17.14
+-- @types/jest@28.1.3
+-- @types/node@18.11.9
+-- axios@1.2.0
+-- cors@2.8.5
+-- dotenv@16.0.3
+-- express@4.18.2
+-- jest@28.1.1
+-- pm2@5.2.2
+-- ts-jest@28.0.5
+-- ts-node-dev@2.0.0
`-- typescript@4.9.3

And this is the output on my local machine:

ez-recipes-server@1.0.0 /home/abhiek187/github/ez-recipes/ez-recipes-server
├── @types/cors@2.8.12
├── @types/express@4.17.14
├── @types/jest@28.1.3
├── @types/node@18.8.3 invalid: "^18.11.9" from the root project
├── axios@1.1.2 invalid: "^1.2.0" from the root project
├── cors@2.8.5
├── dotenv@16.0.3
├── express@4.18.2
├── jest@28.1.1
├── pm2@5.2.2
├── ts-jest@28.0.5
├── ts-node-dev@2.0.0
└── typescript@4.8.4 invalid: "^4.9.3" from the root project

So it's working on Axios 1.1.2, but not 1.2.0. Guess I didn't update all my dependencies. 😅

Also, my node version is v16.16.0, while Docker's version is v18.12.1, in case that makes a difference.

[Abhiek187]

Yep, I was right, this is due to a bug in Axios 1.2.0: axios/axios#5328. I can either roll back to 1.1.3 or wait for a patch.

The update was done in #44, but I only mocked the API calls while testing. Maybe I should consider testing the real calls? I don't want to do too many tests since I have a limited quota, but this will prevent bugs like these from making it into production. (It will also help if spoonacular changes its schema in the future since we're not in control of the data that's sent back.)