compiler
compiler copied to clipboard
withastro
Expressions in `<head>` causes elements to end up in `<body>`
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.
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[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
While creating the reproduction repo, I noticed, that the conditional title in the head causes the encoding to break:
It seems that some of the tags are misplaced to <body> when this kind of expression is in <head>:
{<title>{...}</title>}
@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>
@MoustaphaDev should merge https://github.com/withastro/compiler/issues/982 he thinks is related to this.
@Princesseuh Can priority level be urgent? Can't upgrade after 4.2.1 because everything break.
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?
I add this inside <head> to see issue from astro build.
{[1, 2, 3].map(() => <>
{<meta name="" content="" />}
</>)}
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?
I was able to reproduce it down with this: https://stackblitz.com/edit/github-pfaayw-axdvrr?file=src%2Fpages%2Findex.astro,package.json
Unfortunately that PR breaks a bunch of tests in core. There might be a way to fix this issue differently, though.
Pretty sure this is the culprit: https://github.com/withastro/compiler/commit/14ccba5d4dc0c962af247eff7cb0d7c199302538
I need to test against core, but hopefully this does it: https://github.com/withastro/compiler/pull/990
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.
@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
