{"id":7945,"date":"2023-05-24T21:53:06","date_gmt":"2023-05-24T16:53:06","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=7945"},"modified":"2023-05-24T21:54:08","modified_gmt":"2023-05-24T16:54:08","slug":"promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/","title":{"rendered":"&#8216;Promise<Element>&#8216; is not a valid JSX element | Async React Server Component TypeScript Error in Next.js"},"content":{"rendered":"<p><span class=\"css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0\"><span class=\"r-b88u0q\">TypeScript DOES NOT like Async React Server Components in Nextjs \u2014 here&#8217;s a fix \ud83d\udc4a<\/span><\/span><\/p>\n<p><span class=\"css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0\">Hey, developers! Next.js React Server Components are pretty awesome. TypeScript, as you can imagine, has a small issue with them. You might have encountered the &#8220;&#8216;Promise&lt;Element&gt;&#8217; is not a valid JSX element type&#8221; error. But fret not because there&#8217;s a quick fix! <\/span><\/p>\n<p><span class=\"css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0\">In this OneDevMinute video, I&#8217;ll show you a simple workaround to disable type-checking for async Server Components. With one step, you&#8217;ll be back on track. <\/span><\/p>\n<p><span class=\"css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0\">Check out the video now to save time and stay productive! And if you find it helpful, don&#8217;t forget to hit that &#8220;Subscribe&#8221; button and leave a reply. <\/span><\/p>\n<p><span class=\"css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0\">Happy coding, folks!\u00a0<\/span><\/p>\n<div class=\"wide\">\n<p><iframe loading=\"lazy\" title=\"TypeScript DOES NOT like Async React Server Components in Nextjs \u2014 here&#039;s a fix \ud83d\udc4a\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/gpclT5VPZL8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/div>\n<p>Lovely jubbly, now you know!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You might have encountered the &#8220;&#8216;Promise<Element>&#8216; is not a valid JSX element type&#8221; error. But fret not because there&#8217;s a quick fix! Async React Server Component TypeScript Error in Next.js.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[215],"tags":[270],"class_list":["post-7945","post","type-post","status-publish","format-standard","hentry","category-web","tag-next-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>&#039;Promise&#039; is not a valid JSX element | Async React Server Component TypeScript Error in Next.js<\/title>\n<meta name=\"description\" content=\"You might have encountered the &quot;&#039;Promise&#039; is not a valid JSX element type&quot; error. But fret not because there&#039;s a quick fix! Async React Server Component TypeScript Error in Next.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"&#039;Promise&#039; is not a valid JSX element | Async React Server Component TypeScript Error in Next.js\" \/>\n<meta property=\"og:description\" content=\"You might have encountered the &quot;&#039;Promise&#039; is not a valid JSX element type&quot; error. But fret not because there&#039;s a quick fix! Async React Server Component TypeScript Error in Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Awais\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-24T16:53:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-24T16:54:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2024\/08\/ahmad-awais.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ahmad Awais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:site\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ahmad Awais\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"&#8216;Promise&#8216; is not a valid JSX element | Async React Server Component TypeScript Error in Next.js\",\"datePublished\":\"2023-05-24T16:53:06+00:00\",\"dateModified\":\"2023-05-24T16:54:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/\"},\"wordCount\":154,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"keywords\":[\"Next.js\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/\",\"name\":\"'Promise' is not a valid JSX element | Async React Server Component TypeScript Error in Next.js\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"datePublished\":\"2023-05-24T16:53:06+00:00\",\"dateModified\":\"2023-05-24T16:54:08+00:00\",\"description\":\"You might have encountered the \\\"'Promise' is not a valid JSX element type\\\" error. But fret not because there's a quick fix! Async React Server Component TypeScript Error in Next.js.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"&#8216;Promise&#8216; is not a valid JSX element | Async React Server Component TypeScript Error in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/\",\"name\":\"Ahmad Awais\",\"description\":\"Founder &amp; CEO of CommandCode.ai f\\\/k\\\/a Langbase | Google Developers Advisory Board (gDAB) founding member\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahmadawais.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\"},\"description\":\"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \\\"Awais is an awesome example for developers\\\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\\\/ML\\\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\\\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.\",\"sameAs\":[\"https:\\\/\\\/AhmadAwais.com\\\/\",\"https:\\\/\\\/facebook.com\\\/AhmadAwais\",\"https:\\\/\\\/instagram.com\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/x.com\\\/MrAhmadAwais\",\"https:\\\/\\\/youtube.com\\\/AhmadAwais\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"'Promise' is not a valid JSX element | Async React Server Component TypeScript Error in Next.js","description":"You might have encountered the \"'Promise' is not a valid JSX element type\" error. But fret not because there's a quick fix! Async React Server Component TypeScript Error in Next.js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"'Promise' is not a valid JSX element | Async React Server Component TypeScript Error in Next.js","og_description":"You might have encountered the \"'Promise' is not a valid JSX element type\" error. But fret not because there's a quick fix! Async React Server Component TypeScript Error in Next.js.","og_url":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2023-05-24T16:53:06+00:00","article_modified_time":"2023-05-24T16:54:08+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2024\/08\/ahmad-awais.jpg","type":"image\/jpeg"}],"author":"Ahmad Awais","twitter_card":"summary_large_image","twitter_creator":"@MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"&#8216;Promise&#8216; is not a valid JSX element | Async React Server Component TypeScript Error in Next.js","datePublished":"2023-05-24T16:53:06+00:00","dateModified":"2023-05-24T16:54:08+00:00","mainEntityOfPage":{"@id":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/"},"wordCount":154,"commentCount":0,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"keywords":["Next.js"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/","url":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/","name":"'Promise' is not a valid JSX element | Async React Server Component TypeScript Error in Next.js","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"datePublished":"2023-05-24T16:53:06+00:00","dateModified":"2023-05-24T16:54:08+00:00","description":"You might have encountered the \"'Promise' is not a valid JSX element type\" error. But fret not because there's a quick fix! Async React Server Component TypeScript Error in Next.js.","breadcrumb":{"@id":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/promise-is-not-a-valid-jsx-element-async-react-server-component-typescript-error-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"&#8216;Promise&#8216; is not a valid JSX element | Async React Server Component TypeScript Error in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/ahmadawais.com\/#website","url":"https:\/\/ahmadawais.com\/","name":"Ahmad Awais","description":"Founder &amp; CEO of CommandCode.ai f\/k\/a Langbase | Google Developers Advisory Board (gDAB) founding member","publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahmadawais.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg"},"description":"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \"Awais is an awesome example for developers\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\/ML\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.","sameAs":["https:\/\/AhmadAwais.com\/","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/x.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/comments?post=7945"}],"version-history":[{"count":2,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7945\/revisions"}],"predecessor-version":[{"id":7947,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/7945\/revisions\/7947"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=7945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=7945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=7945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}