Description
Astro Info
Astro v5.7.7
Node v20.12.2
System Windows (x64)
Package Manager npm
Output static
Adapter none
Integrations none
If this issue only occurs in one browser, which browser is a problem?
Chrome, Firefox, Vivaldi
Describe the Bug
The behaviour is weird because there are two totally different workarounds around the issue.
Essentially assume a layout:
<!doctype html>
<html lang="en">
<body>
<main>
<slot />
</main>
</body>
</html>
Then a simple page using the layout:
---
import IngredientsBlock from "../components/IngredientsBlock.astro";
import Layout from "../layouts/Layout.astro";
---
<Layout>
<h1>Add New post</h1>
<form>
<div>
<div id="ingredients-container">
<IngredientsBlock />
</div>
</div>
<button type="submit">Submit</button>
</form>
</Layout>
<template id="ingredient-template">
<IngredientsBlock />
</template>
<script>
import { actions } from "astro:actions";
const form = document.querySelector("form");
form.addEventListener("submit", async (event) => {
// event.preventDefault();
const formData = new FormData(form);
const { error } = await actions.addRecipe(formData);
});
</script>
The page uses an action to push formdata, what's relevant is the actual usage of the "actions.addRecipe" action. The page also contains a template for a block that is outside the layout block.
The IngredientsBlock is a super simple component:
<div class="ingredient-block">
...
</div>
<script>
console.log('Welcome, browser console!');
</script>
The issue is:
Welcome, browser console! never logs to console.
Reproducible example: https://github.com/Levelleor/astro-script-not-loading
Workarounds:
Omit const { error } = await actions.addRecipe(formData); from the script on the page component.
Move
<template id="ingredient-template">
<IngredientsBlock />
</template>
to inside <Layout></Layout>. I don't understand why this works. <IngredientsBlock /> has two calls, one inside layout, another in this template block, but when it's called even once outside the layout here the inline script fails to load correctly.
- I don't have an example for workaround 3, but it is enabling
is:inlineon the IngredientsBlock like so:
<script is:inline>
console.log('Welcome, browser console!');
</script>
I'd assume the script should be inline by default, it's just a console.log call and according to https://docs.astro.build/en/guides/client-side-scripts/#script-processing I see no reason for it to not work without is:inline.
My assumption is that this is a bug, I don't understand how exactly any of the two workarounds are related but each resolves the issue and the console.log message gets logged as expected.
What's the expected result?
Welcome, browser console! logs to console.
Link to Minimal Reproducible Example
https://github.com/Levelleor/astro-script-not-loading
Participation
- I am willing to submit a pull request for this issue.