TypeError: Cannot destructure property 'reflectionId' of 'undefined' as it is undefined

Question

I have a deeply nested object and I'm trying to get a specific value from it. On my development and production environment, the function returns the error above (TypeError: Cannot destructure property 'reflectionId' of 'undefined' as it is undefined.) However, I am unable to debug this, and when I put in the exact same object and function into a code sandbox, it works fine.

I have recreated my object and code in a codesandbox here: https://codesandbox.io/s/nameless-bird-rknxrr?file=/src/index.js:28281-28461 (check the console to see the working output)

const discordLink = CHARACTER_MAP
  .flatMap((character) => character.chapters)
  .find(({ reflectionId }) => reflectionId === reflectionNum).discordLink;

What could the problem be? The flatMap returns a properly formatted object (checked that). reflectionId is the property name I am looking for, and it seems correctly defined in both my live code and the sandbox. Based on how .find() is described in [the Mozilla docs] 1 it seems like I'm using the "Using arrow function and destructuring" method properly too. It's most puzzling that it works in codesandbox but not in live.

Answer 1

Try this :

const discordLink = CHARACTER_MAP
  .flatMap((character) => character.chapters)
  .find((reflection) => reflection.reflectionId === reflectionNum).discordLink