1

I have a set of Astro components to be called by my App:

apps/myProject

libs/components/header

Inside the header.astro component, I have a script that I want to be run once the entire page is rendered:

<script is:inline>
  console.log('hej!');
  window.onload = (e) => {
    console.log('loaded!');
  };
</script>

The 'hej!' is being printed but not the 'loaded!'. Why is that?

For me, it is not clear how the component's lifecycle works in Astro, and I have followed this solution by adding the is:inline property to the script tag, but it still doesn't work.

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
María Paz Muñoz Parra
  • 11
  • 2

3 Answers3

1

Solution

The solution shall be as simple as

<script is:inline>
    console.log('hej!');
    console.log('loaded!');
</script>

which yields

enter image description here

Misunderstandings and Misleading solutions

question solution proposal

this script inside a page.astro works, in case the question pretend that it does not, it is very important to provide more elements like a complete example project as the error is most likely somewhere else not in the provided code.

<script is:inline>
  console.log('hej!');
  window.onload = (e) => {
    console.log('loaded!');
  };
</script>

I took it in a default astro example and it yields the following output

enter image description here

but is not ideal because window.onload is not needed : see When to use "window.onload"?

see astro official examples to take as test basis here (https://github.com/withastro/astro/tree/main/examples)

adding frontmatter separation

The solution below unnecessarily adds --- --- which is an optional frontmatter entry, when not available then the content is interpreted as the second body part which is where the script is supposed to be located

---
---

<script>
    console.log('hello');
    window.onload = (e) => {
        console.log('loaded!');
    };
</script>

adding type module or hoist

please udpate and see https://docs.astro.build/en/migrate/#new-default-script-behavior

from there you get to know that :

  • BREAKING: <script hoist> is the new default <script> behavior. The hoist attribute has been removed. To use the new default behaviour, make sure there are no other attributes on the <script> tag. For example, remove type="module" if you were using it before.

using is:inline

The question author has been mislead by another post (How to use document and window element in astro JS?), taken as granted which is wrong and I submitted an answer to correct it because is:inline inside <script> is not needed and has unintended side effects like unnecessarily duplicating the script code, see a direct link to this answer there How to use document and window element in astro JS?

wassfila
  • 1,173
  • 8
  • 18
0

Think of *.astro files as all server side, you cannot use <script>...</script> inside the

---
---

but you can use <script></script> in the html part of astro file. the below example works fine for me.

---
---

<script>
    console.log('hello');
    window.onload = (e) => {
        console.log('loaded!');
    };
</script>

<p>hello world!</p>
lightyaer
  • 45
  • 6
0

You should be able to use load modules on the client with hoist.

<script type="module" hoist>
  console.log('loaded!');
</script>

window.onload isn't necessary since ES modules are automatically deferred.

Nick McCurdy
  • 17,658
  • 5
  • 50
  • 82