Zenn
🔭

AstroでLayoutの外にタグを書くと文字化けする

2024/06/16に公開
Astro
tech

Astroではhtmlタグまでを含んだLayoutを自分で定義してページなどで呼び出すことになるが、そのLayoutの外側にタグを書いてしまうと、出力されるhtmlソースでhtmlタグよりも前にいくつかのタグが挿入されることで、headタグの中身が正しく認識されず<meta charset="UTF-8" />の指定が無効になり文字化けすることが分かった

再現条件をいくつか試したが、かなり限定的なケースでのみ発生する模様

BaseLayout.astro
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <slot />
  </body>
</html>
Layout.astro
import BaseLayout from '~/layouts/BaseLayout.astro'
import Foo from '~/components/Foo.vue'
---

<Foo client:load />

<BaseLayout>
  <slot />
</BaseLayout>

Discussion