🐛 BUG: Page blank when <Head> is outsourced to component (Astro 0.21.4) #2022

stephanbogner · 2021-11-25T10:34:06Z

What version of `astro` are you using?

0.21.4

What package manager are you using?

npm

What operating system are you using?

Mac (Catalina 10.15.7)

Describe the Bug

Woah ... that took me some hours to reproduce because the behaviour is so strange 😅

Description

Page doesn't render (completely white, but no errors), when <head>...</head> is outsourced to another component (which worked perfectly fine before 0.21.X).
However, this doesn't always happen – see "Various cases" for more details.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-5aervp?file=src/pages/index.astro

Various cases for index.astro:

I only provided the failing case 2 in StackBlitz, but there is more to it:

✅ Case 1 – Works (no `<MetaHead/>` or `<head></head>`)

---
import MetaHead from '../components/MetaHead.astro';
import Tour from '../components/Tour.astro';
---
<html lang="en">
    <body>
        Test
    </body>
</html>

❌ Case 2 – Doesn't work (`<MetaHead/>` added)

---
import MetaHead from '../components/MetaHead.astro';
import Tour from '../components/Tour.astro';
---
<html lang="en">
    <MetaHead/>
    <body>
        Test
    </body>
</html>

✅ Case 3 – Works 😮 (`Test` replaced with `<Tour/>`)

---
import MetaHead from '../components/MetaHead.astro';
import Tour from '../components/Tour.astro';
---
<html lang="en">
    <MetaHead/>
    <body>
        <Tour/>
    </body>
</html>

✅ Case 4 – Works again (Empty `<head></head>` added):

---
import MetaHead from '../components/MetaHead.astro';
import Tour from '../components/Tour.astro';
---
<html lang="en">
    <head></head>
    <MetaHead/>
    <body>
        Test
    </body>
</html>

✅ Case 5 – Also works (readded `<Tour/>`)

---
import MetaHead from '../components/MetaHead.astro';
import Tour from '../components/Tour.astro';
---
<html lang="en">
    <head></head>
    <MetaHead/>
    <body>
        Test
        <Tour/>
    </body>
</html>

MetaHead.astro

This file is also in StackBlitz, but for completeness, I added it here too:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Head Component Test</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="stylesheet" href={Astro.resolve('../styles/global.scss')}>
    <link rel="stylesheet" href={Astro.resolve('../styles/home.scss')}>

    <style>
        header {
            display: flex;
            flex-direction: column;
            gap: 1em;
            max-width: min(100%, 68ch);
        }
    </style>
</head>

The text was updated successfully, but these errors were encountered:

Chrissdroid · 2021-11-25T11:56:22Z

Can confirm, it's happening also for me. (even regressing to previous astro version 0.21.x breaks also although it worked back then)

peterlerche · 2021-11-29T19:41:51Z

I have the same experience

drwpow · 2021-11-29T22:28:13Z

We’ve been noticing some weirdness when <head> or <body> are included in components. @natemoo-re is adding fixes in the compiler to prevent errors. I think we are still deciding on how best to handle this, but current workaround is to limit <head> and <body> tags to pages, and try to make a habit to always include them.

This may even become best practice, because if <head> can be specified within components, we’d likely need some sort of API or behavior to merge & combine those tags, which we don’t have currently.

stephanbogner · 2021-11-30T12:23:28Z

@drwpow My 5cts:

Limitting <head> and <body> to pages should be fine (if mentioned in the documentation) 👍 .

Solutions for the "<head> inside components"-problem (e.g. for React with React-Helmet) feel like a hack anyways, when you are used to writing "normal" HTML-files, where you have the <head> once.

FYI: So far, I personally structured my projects like this:
→ Basically outsourcing the whole head into its own component (just to keep everything neat and tidy and reusable across projects).

<html lang="en">
<MetaHead title="Interface Index | Collection of interface elements" ogTitle="Interface Index"/>
<body>
    <main>
    ...
    </main>
</body>
</html>

But I don't see a problem doing this as well:

<html lang="en">
<head>
    <MetaHeadContent title="Interface Index | Collection of interface elements" ogTitle="Interface Index"/>
</head>
<body>
    <main>
    ...
    </main>
</body>
</html>

drwpow · 2021-11-30T14:14:28Z

Yea that all sounds reasonable!

Limitting and to pages should be fine (if mentioned in the documentation) 👍 .

Yes this needs to he explicit, you’re right! But before we commit to this, let me check with the other core maintainers to get their opinions. Because what this ticket is about is lack of clarity on whether a limitation is intentional or not. And we’ll try our best to make it intentional (in service of easier-to-manage code), and clear (docs, warnings, etc).

jonathantneal · 2021-12-14T23:16:41Z

Confirmed this is still happening in Astro v0.21.12.

https://stackblitz.com/edit/github-5aervp-kt2jvq?file=astro.config.mjs

tony-sull · 2022-02-15T09:41:20Z

An RFC was accepted not too long ago to finalize <head> and <body> behavior 👍

natemoo-re · 2022-02-15T19:00:42Z

This is on track to be fixed in withastro/compiler#267 and the subsequent 0.24.x release of astro.

natemoo-re · 2022-03-11T22:54:14Z

This should be fixed in the newly released [email protected]! See working reproduction.

Please give feel free to reopen this issue if you're still having trouble.

stephanbogner mentioned this issue Dec 1, 2021

🐛 BUG: RuntimeError when using components to wrap children #2063

Closed

philipp-tailor mentioned this issue Dec 5, 2021

🐛 BUG: Collection of <head> issues as of v0.21.10 #2128

Closed

tony-sull added bb:improvement and removed bb:improvement labels Feb 15, 2022

natemoo-re added this to the 0.24 milestone Mar 9, 2022

natemoo-re removed the rfc 0007 label Mar 9, 2022

natemoo-re closed this as completed Mar 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 BUG: Page blank when <Head> is outsourced to component (Astro 0.21.4) #2022

🐛 BUG: Page blank when <Head> is outsourced to component (Astro 0.21.4) #2022

stephanbogner commented Nov 25, 2021 •

edited

Loading

Chrissdroid commented Nov 25, 2021

peterlerche commented Nov 29, 2021

drwpow commented Nov 29, 2021

stephanbogner commented Nov 30, 2021

drwpow commented Nov 30, 2021

jonathantneal commented Dec 14, 2021

tony-sull commented Feb 15, 2022

natemoo-re commented Feb 15, 2022

natemoo-re commented Mar 11, 2022

🐛 BUG: Page blank when <Head> is outsourced to component (Astro 0.21.4) #2022

🐛 BUG: Page blank when <Head> is outsourced to component (Astro 0.21.4) #2022

Comments

stephanbogner commented Nov 25, 2021 • edited Loading

What version of astro are you using?

What package manager are you using?

What operating system are you using?

Describe the Bug

Description

Link to Minimal Reproducible Example

Various cases for index.astro:

✅ Case 1 – Works (no <MetaHead/> or <head></head>)

❌ Case 2 – Doesn't work (<MetaHead/> added)

✅ Case 3 – Works 😮 (Test replaced with <Tour/>)

✅ Case 4 – Works again (Empty <head></head> added):

✅ Case 5 – Also works (readded <Tour/>)

MetaHead.astro

Chrissdroid commented Nov 25, 2021

peterlerche commented Nov 29, 2021

drwpow commented Nov 29, 2021

stephanbogner commented Nov 30, 2021

drwpow commented Nov 30, 2021

jonathantneal commented Dec 14, 2021

tony-sull commented Feb 15, 2022

natemoo-re commented Feb 15, 2022

natemoo-re commented Mar 11, 2022

stephanbogner commented Nov 25, 2021 •

edited

Loading

What version of `astro` are you using?

✅ Case 1 – Works (no `<MetaHead/>` or `<head></head>`)

❌ Case 2 – Doesn't work (`<MetaHead/>` added)

✅ Case 3 – Works 😮 (`Test` replaced with `<Tour/>`)

✅ Case 4 – Works again (Empty `<head></head>` added):

✅ Case 5 – Also works (readded `<Tour/>`)