Astro build is incorrectly failing on React components

[icy wolf]

My dev server is working fine, but after attempting to build, I am left with several errors that appear to be a mistake

Error 1

src/components/Nav/NavMain.tsx:31:11 - error ts(2322): Type '{ class: string; dangerouslySetInnerHTML: { __html: string; }; }' is not assignable to type 'HTMLAttributes'.
  Property 'dangerouslySetInnerHTML' does not exist on type 'HTMLAttributes'.

31           dangerouslySetInnerHTML={{ __html: LogoIcon }}

The source:

<div
          class="w-8 h-8 flex justify-center items-center px-1"
          dangerouslySetInnerHTML={{ __html: LogoIcon }}
        />

Error 2

src/components/Headless/Nav/NavTOCButton.tsx:27:7 - error ts(2322): Type '{ children: any[]; onClick: () => void; "aria-label": string; class: string; }' is not assignable to type 'ButtonHTMLAttributes'.
  Property 'onClick' does not exist on type 'ButtonHTMLAttributes'. Did you mean 'onclick'?

27       onClick={toggleMenu}

This is the correct syntax for a react button, but the build stage is failing.

Here is part of my config:

import preact from "@astrojs/preact";

// https://astro.build/config
export default defineConfig({
  site: process.env.NODE_ENV === "development" ? "http://localhost:4321" : "https://techsquidtv.com",
  integrations: [tailwind(), sitemap(), preact(), embeds(), expressiveCode(), mdx(), sentry(), spotlightjs()],

[ripe orbit]

Hi @icy wolf. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, it seems like you're encountering build errors when using Astro with React components. However, the extracts do not provide specific solutions to the errors you're encountering.

The extracts do show that others have encountered build errors with Astro, particularly when using React or other JavaScript frameworks. These issues often involve problems with resolving component paths or issues with the build process itself. However, the specific errors you're encountering, related to TypeScript type assignments, are not directly addressed in the extracts.

Given this, I would recommend checking the official Astro documentation or the Astro GitHub issues for potential solutions. You might also want to ensure that your Astro and React versions, as well as any plugins you're using, are up-to-date and compatible with each other.

If you're still encountering issues, consider opening a new issue on the Astro GitHub page with a detailed description of your problem and any error messages you're receiving. The Astro community or the Astro team might be able to provide further assistance.

I'm sorry I couldn't provide a more specific solution based on the information available.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: