10000 Client script doesn't execute in specific edge cases · Issue #13710 · withastro/astro · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Client script doesn't execute in specific edge cases #13710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 task
Levelleor opened this issue Apr 28, 2025 · 0 comments
Open
1 task

Client script doesn't execute in specific edge cases #13710

Levelleor opened this issue Apr 28, 2025 · 0 comments
Labels
needs triage Issue needs to be triaged

Comments

@Levelleor
Copy link
Levelleor commented Apr 28, 2025 •
edited
Loading

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:

  1. https://github.com/Levelleor/astro-script-not-loading/tree/working-example-1

Omit const { error } = await actions.addRecipe(formData); from the script on the page component.

  1. https://github.com/Levelleor/astro-script-not-loading/tree/working-example-2

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.

  1. I don't have an example for workaround 3, but it is enabling is:inline on 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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Apr 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage Issue needs to be triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Levelleor
0