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

Expressions in <head> causes elements to end up in <body> #985

Closed
1 task
donnikitos opened this issue Mar 15, 2024 · 17 comments · Fixed by #990
Closed
1 task

Expressions in <head> causes elements to end up in <body> #985

donnikitos opened this issue Mar 15, 2024 · 17 comments · Fixed by #990
Labels
needs repro Issue needs a reproduction needs triage Issue needs to be triaged

Comments

@donnikitos
Copy link

donnikitos commented Mar 15, 2024 •
edited
Loading

Astro Info

Astro                    v4.5.5
Node                     v21.6.2
System                   Linux (x64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/preact
                         astro-reroute

If this issue only occurs in one browser, which browser is a problem?

Chrome, Chromium, Firefox

Describe the Bug

Updated Astro from 4.0.8 to latest 4.5.4 and suddenly browsers receive files with broken utf-8 characters:
image
image

<meta charset="UTF-8" /> is set.
Input files are encoded in proper UTF-8 charset.

For now my only solution for deployment is to enforce UTF-8 via .htaccess headers.
Dev server still displays broken characters.

What's the expected result?

During development and after build non-ASCI character should be properly encoded.
For example:

  • ö should be ö
  • ü should be ü
  • ...

Link to Minimal Reproducible Example

https://github.com/donnikitos/astro-utf-bug

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Mar 15, 2024
@lilnasy lilnasy added the needs repro Issue needs a reproduction label Mar 16, 2024
@github-actions GitHub Actions
Copy link
Contributor

Hello @donnikitos. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Mar 16, 2024
@donnikitos
Copy link
Author

While creating the reproduction repo, I noticed, that the conditional title in the head causes the encoding to break:
image

@mingjunlu
Copy link

It seems that some of the tags are misplaced to <body> when this kind of expression is in <head>:

{<title>{...}</title>}

@mingjunlu
Copy link

mingjunlu commented Mar 18, 2024 •
edited
Loading

@donnikitos After playing around with the reproduction repo, I think I might have found a workaround: wrapping <title> with <Fragment>. Could you try if it works for you?

<Fragment>{meta?.title && <title>{meta.title}</title>}</Fragment>

@Princesseuh Princesseuh transferred this issue from withastro/astro Mar 18, 2024
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Mar 18, 2024
@Princesseuh Princesseuh changed the title Broken UTF-8 after update Expressions in <head> causes elements to end up in <body> Mar 18, 2024
@cdtut
Copy link

cdtut commented Mar 27, 2024

@MoustaphaDev should merge #982 he thinks is related to this.

@cdtut
Copy link

cdtut commented Mar 28, 2024

@Princesseuh Can priority level be urgent? Can't upgrade after 4.2.1 because everything break.

@matthewp
Copy link
Contributor

This simple example doesn't reproduce: https://stackblitz.com/edit/github-pfaayw?file=src%2Fpages%2Findex.astro

Can anyone come up with a minimal repro at the level with it?

@cdtut
Copy link

cdtut commented Mar 28, 2024

I add this inside <head> to see issue from astro build.

{[1, 2, 3].map(() => <>
    {<meta name="" content="" />}
</>)}

@matthewp
Copy link
Contributor

I updated this demo to use that: https://stackblitz.com/edit/github-pfaayw?file=src%2Fpages%2Findex.astro,package.json

Still in the head. Can you adjust my demo to get it to break?

@matthewp
Copy link
Contributor

I was able to reproduce it down with this: https://stackblitz.com/edit/github-pfaayw-axdvrr?file=src%2Fpages%2Findex.astro,package.json

@matthewp matthewp mentioned this issue Mar 29, 2024
Closed
@matthewp
Copy link
Contributor

Unfortunately that PR breaks a bunch of tests in core. There might be a way to fix this issue differently, though.

@matthewp
Copy link
Contributor

Pretty sure this is the culprit: 14ccba5

@matthewp matthewp mentioned this issue Mar 29, 2024
Merged
@matthewp
Copy link
Contributor

I need to test against core, but hopefully this does it: #990

@cdtut
Copy link

cdtut commented Mar 29, 2024

If test pass will PR be in next astro release?

@matthewp
Copy link
Contributor

I'll create a preview release and have a few people test it. But yes, it will be soon (probably next week) if everything looks ok.

@matthewp
Copy link
Contributor

@cdtut you can test by install astro@experimental--head-body-content.

I tested with this demo, which is fixed now: https://stackblitz.com/edit/github-pfaayw-axdvrr?file=src%2Fpages%2Findex.astro,package.json

@deeprobin
Copy link

@matthewp's fix works for my case 😄.
Thank you!

@matthewp matthewp mentioned this issue Apr 2, 2024
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs repro Issue needs a reproduction needs triage Issue needs to be triaged
Projects
None yet
Milestone
No milestone
6 participants
@matthewp @donnikitos @deeprobin @mingjunlu @lilnasy @cdtut