Style and script tags rendering in the body when adding a React component inside an Astro component

[hexed pelican]

Astro component:

---
import { Image } from "astro:assets";
import logoLeDevoir from "../images/logo-le-devoir.png";
import { Contact } from "./Contact";
---

<footer class="footer bg-secondary p-10">
  <aside>
    <Image src={logoLeDevoir} alt="Le Devoir" height="40" />
  </aside>

  <nav>
    <header class="footer-title">Social</header>

    <div class="grid grid-flow-col gap-3">
      <a href="">
        <i class="icon-facebook text-2xl/none text-primary"></i>
      </a>
      <a href="">
        <i class="icon-instagram text-2xl/none text-primary"></i>
      </a>
    </div>
  </nav>

  <Contact client:only="react" />
</footer>

React component:

import { useEffect, useState } from "react";
import axios from "axios";

export const Contact = () => {
  const [dogImg, setDogImg] = useState<string>();

  useEffect(() => {
    axios
      .get("https://dog.ceo/api/breeds/image/random")
      .then(function (response) {
        // handle success
        console.log(response);
        setDogImg(response.data.message);
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  }, []);

  return (
    <>
      <div>
        <header className="footer-title">Pour annoncer</header>

        <img src={dogImg} alt="dog" width={200} />
      </div>

      <div>
        <header className="footer-title">Équipe</header>

        <div className="flex space-x-12">
          {/* ... */}
        </div>
      </div>
    </>
  );
};

[sleek iron]

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

---

The code you've provided includes an Astro component and a React component.

The Astro component is a footer that includes an image and some social media links. It also imports and uses a React component named Contact. The client:only="react" directive is used to indicate that this component should be rendered entirely on the client-side.

The React component Contact fetches a random dog image from an API and displays it. It uses the useEffect hook to make the API call when the component mounts, and the useState hook to store the image URL.

If you want to use these components in your Astro project, you can do so by importing the Astro component in the desired .astro file. For example:

---
import Footer from '../components/Footer.astro';
---

<Footer />

Remember to replace '../components/Footer.astro' with the actual path to your Footer.astro file.

For more information on how to use components in Astro, you can refer to the Astro Documentation (https://docs.astro.build/en/core-concepts/astro-components/). If you're new to React, the React Documentation (https://reactjs.org/docs/hooks-intro.html) is a great place to start learning about hooks.

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

@hexed pelican kapa.ai is still learning and improving, please let us know how it did by reacting below

[hexed pelican]

The issue is that the Astro island's style and script tags are rendered inside the footer and visible on the page.

@sleek iron The issue is that the Astro island's style and script tags are rendered inside the footer and visible on the page.

[sleek iron]

Let me check the knowledge base for you. One moment! :books:

---

Astro processes <script> and <style> tags by default, optimizing and bundling them. However, if you want to prevent this behavior and keep the tags as-is in the final output HTML, you can use the is:inline directive. This directive tells Astro to leave the <script> or <style> tag as it is, without processing, optimizing, or bundling its contents.

Here's an example of how to use the is:inline directive:

<style is:inline>
  /* inline: relative & npm package imports are not supported. */
  @import '/assets/some-public-styles.css'; 
  span { color: green; }
</style>

<script is:inline>
  /* inline: relative & npm package imports are not supported. */
  console.log('I am inlined right here in the final output HTML.');
</script>

However, please note that using is:inline limits some Astro features, like importing an npm package or using a compile-to-CSS language like Sass. Also, the is:inline directive is implied whenever any attribute other than src is used on a <script> or <style> tag.

For more information, you can refer to the Astro Documentation (https://docs.astro.build/en/reference/directives-reference/).

If you're seeing unexpected <script> or <style> tags included in your HTML source, it could be due to Astro's build process. Once a component is included in the template, its <script> and <style> tags are processed, optimized, and bundled, whether it appears in the final output or not. This does not apply to scripts when the is:inline directive is applied. You can read more about this in the Astro Troubleshooting Guide (https://docs.astro.build/en/guides/troubleshooting/).

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