Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 BUG: BaseHead component in head section is putting scripts into body #389

Closed
1 task
moritzlaube opened this issue May 10, 2022 · 6 comments
Closed
1 task

🐛 BUG: BaseHead component in head section is putting scripts into body #389

moritzlaube opened this issue May 10, 2022 · 6 comments
Labels
needs response

Comments

@moritzlaube
Copy link

What version of astro are you using?

1.0.0-beta.27

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

I have a BaseLayout component in which I am using a BaseHead component to pass my meta tags etc. Next to to that component I am using a named slot like to also Pass Social MEta Tags:

// BaseLayout.astro
<html lang="en">
  <head>
    <BaseHead {title} {description} />
    <slot name="social" />
  </head>
  <body>
    <main>
      <slot />
    </main>
  </body>
</html>

I then have a BlogPost component which usees the BaseLayout component and passes a Social Meta component like so:

<Layout {title} {description}>
  <SocialMeta slot="social" />
  <main>
    <h1>{title}</h1>
    <img src={headerImage} />
    <slot />
  </main>
</Layout>

This setup produces a weird issue where all my script tags from the BaseHead component are rendered into the body tag of the final html. This is an issue since early on (24 or so). I posted it on the Discord channel but never filed a bug report.

Check out the Stackblitz. Run it and open the DevTools.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-akxdgm-wqfikb?file=src/layouts/BlogPost.astro

Participation

  • I am willing to submit a pull request for this issue.
@moritzlaube
Copy link
Author

One more thing: It seems like it has something to do with the Meta Pixel script in the BaseHead component. When I am taking it out, the scripts don't appear in the body tag anymore. Specifically the tag that comes along with the Pixel implementation seems to cause the error. When I am only deleting the tag, it solves the issue. Super weird, right? Thanks for looking into it! Best

@moritzlaube
Copy link
Author

Could this issue have something to do with it: #225? Now, the compiler seems to process the noscript tags. But when using a Meta Pixel the src of the used image shouldn't be compiled, if I'm not mistaken. So I tried is:raw. But this is only working on script and style tags.

@moritzlaube
Copy link
Author

This is how the noscript section of the Meta Pixel looks like:

<noscript
  ><img
    height="1"
    width="1"
    style="display:none"
    src="https://www.facebook.com/tr?id=<My-Id>&ev=PageView&noscript=1"
  /></noscript
>

@natemoo-re
Copy link
Member

Interesting! I think this is a compiler issue when <noscript> element is used inside of <head>. Going to transfer this there to track!

@natemoo-re natemoo-re transferred this issue from withastro/astro May 10, 2022
@moritzlaube
Copy link
Author

MDN says that the <noscript> tag may only contain script, link or style tags when used in the head. So technically, the Meta (facebook) Pixel noscript tag shouldn't be used within the head section and put into the body even though that's what Facebook implies. So the question is, whether it is actually a compiler issue or a semantic one? If the latter, I'd close this issue again.

@Princesseuh Princesseuh added the needs triage Issue needs to be triaged label Nov 12, 2023
@MoustaphaDev
Copy link
Member

MoustaphaDev commented Dec 19, 2023 •
edited
Loading

I couldn't reproduce this using your reproduction @moritzlaube, but I could be missing something. Let me know if you still have this issue.

@MoustaphaDev MoustaphaDev added needs response and removed needs triage Issue needs to be triaged labels Dec 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@matthewp @FredKSchott @Princesseuh @natemoo-re @moritzlaube @MoustaphaDev