Astro is inserting the JS in a bizarre place above the <html> tag.
Closed this issue · 2 comments
Astro Info
Astro v5.0.1
Node v20.16.0
System macOS (arm64)
Package Manager npm
Output static
Adapter none
Integrations astro-html-beautifier
astro-favicons
@astrojs/tailwind
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
When I run the build, I see in the HTML output that the main script tag is inserted above the <html> tag.
This happens when I have a <script> tag in the <Layout> component like so:
<script>
const message = 'Layout'
const date = Date.now()
console.log(`${message} at ${date}`)
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Example</title>
</head>
<body>
<main>
<slot />
</main>
</body>
</html>
Upon further investigation, if I move the <script> tag to be at the bottom of the layout, it is correctly inserted before the closing <body> tag in the final HTML output. So it appears that placement of the <script> tag matters in Astro 5. I did not expect that.
What's the expected result?
Is this expected behaviour of Astro? I'm not sure it's valid. I would expect to see this within the <head> or <body> regardless of the position in my Astro component (layout).
Link to Minimal Reproducible Example
https://stackblitz.com/edit/astro-xzjvze?file=dist%2Findex.html
Participation
- I am willing to submit a pull request for this issue.
This is expected because of the new script behavior. Scripts are no longer hoisted but instead rendered where they are declared. https://docs.astro.build/en/guides/upgrade-to/v5/#script-tags-are-rendered-directly-as-declared
Yeah this is an expected breaking change