--- title: How to fix `Cannot destructure property 'x' of 'y' as it... description: Destructuring properties from undefined or null values throws a TypeError in JavaScript. This commonly occurs with async data in React/Vue components, function... canonical: https://daily.dev/posts/y2ghj9icv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to fix `Cannot destructure property 'x' of 'y' as it is undefined` | daily.dev og:description: Destructuring properties from undefined or null values throws a TypeError in JavaScript. This commonly occurs with async data in React/Vue components, function... og:url: https://daily.dev/posts/y2ghj9icv og:image: https://api.daily.dev/og/posts/Y2gHJ9ICV.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to fix `Cannot destructure property 'x' of 'y' as it is undefined` **[WebDev](https://daily.dev/sources/webdev)** · [@toddhgardner](https://daily.dev/toddhgardner) · 1 upvotes · 0 comments ## Summary Destructuring properties from undefined or null values throws a TypeError in JavaScript. This commonly occurs with async data in React/Vue components, function parameters without defaults, and API responses. Fix by adding default values to destructuring patterns, using conditional guards before destructuring, handling loading states properly, validating API responses, and considering TypeScript for compile-time safety. Unlike dot notation which silently returns undefined, destructuring fails immediately when the source is missing. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [JavaScript for Everyone: Destructuring](https://daily.dev/posts/javascript-for-everyone-destructuring-f7mq0z8t0) · CSS-Tricks · 18 upvotes · 0 comments - [Stop Using TypeScript's Exclamation Mark](https://daily.dev/posts/stop-using-typescript-s-exclamation-mark-re1atfub4) · TypeScript.TV · 258 upvotes · 16 comments - [20 Mistakes That Quietly Destroy JavaScript/TypeScript Codebases \(Part 2\)](https://daily.dev/posts/20-mistakes-that-quietly-destroy-javascript-typescript-codebases-part-2--lgbflmz2i) · The T-Shaped Dev · 59 upvotes · 1 comments - [How to Defend Your JavaScript App Against Unsafe Data with TypeScript Guard Utilities](https://daily.dev/posts/how-to-defend-your-javascript-app-against-unsafe-data-with-typescript-guard-utilities-cuooqjnij) · freeCodeCamp · 5 upvotes · 1 comments - [6 Async JavaScript Mistakes That Become React Bugs](https://daily.dev/posts/6-async-javascript-mistakes-that-become-react-bugs-kpe0sld3r) · Medium · 1 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript) [View this post on daily.dev](https://daily.dev/posts/y2ghj9icv) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/y2ghj9icv","headline":"How to fix `Cannot destructure property 'x' of 'y' as it is undefined`","text":"Shared: How to fix `Cannot destructure property 'x' of 'y' as it is undefined`","url":"https://daily.dev/posts/y2ghj9icv","datePublished":"2026-01-14T11:55:04.625Z","dateModified":"2026-01-14T11:55:04.628Z","author":{"@type":"Person","name":"Todd Gardner","url":"https://daily.dev/toddhgardner","image":"https://media.daily.dev/image/upload/s--0uADve-Y--/f_auto/v1760631400/avatars/avatar_98cai8UH2NmelWmHe6IdN?_a=BAMAK+ZW0","description":"I start things.","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":150}},"image":"https://media.daily.dev/image/upload/s--CxzD6vbw--/f_auto/v1722860399/public/Placeholder%2005","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/Nt4aUjuea"},"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/webdev","name":"WebDev"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"WebDev","item":"https://daily.dev/squads/webdev"},{"@type":"ListItem","position":3,"name":"How to fix `Cannot destructure property 'x' of 'y' as it is undefined`"}]} ```