Expressions in `<head>` causes elements to end up in `<body>`

Question

Expressions in `<head>` causes elements to end up in `<body>`

donnikitos opened this issue 7 months ago · 17 comments

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:

<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.

Answer 1 · 2024-03-16T00:36:31.000Z

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.

Answer 2 · 2024-03-16T09:38:07.000Z

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

Answer 3 · 2024-03-18T08:33:18.000Z

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

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

Answer 4 · 2024-03-18T08:37:32.000Z

@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>

Answer 5 · 2024-03-27T21:56:18.000Z

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

Answer 6 · 2024-03-28T19:25:55.000Z

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

Answer 7 · 2024-03-28T19:46:56.000Z

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?

Answer 8 · 2024-03-28T20:26:11.000Z

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

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

Answer 9 · 2024-03-29T12:22:38.000Z

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?

Answer 10 · 2024-03-29T12:56:54.000Z

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

Answer 11 · 2024-03-29T14:14:27.000Z

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

Answer 12 · 2024-03-29T15:03:29.000Z

Pretty sure this is the culprit: 14ccba5

Answer 13 · 2024-03-29T15:33:01.000Z

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

Answer 14 · 2024-03-29T18:32:55.000Z

If test pass will PR be in next astro release?

Answer 15 · 2024-03-29T18:47:03.000Z

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.

Answer 16 · 2024-03-29T19:12:11.000Z

@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

Answer 17 · 2024-03-29T21:35:52.000Z

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