🐛 BUG: importmaps break due to module script load triggered before

jorenbroekema commented 3 years ago

What package manager are you using?

npm

What operating system are you using?

Windows (WSL2)

Describe the Bug

https://github.com/WICG/import-maps/issues/248 related, explains it a bit more, see also https://github.com/apollographql/apollo-client-devtools/issues/464

Basically, if you use import maps yourself, e.g. at the bottom of body, they will not work and you get something along the lines of:

I assume this is because Astro is inserting ESM stuff at the top of the body rather than the bottom of body.

If I move my importmaps to my <head>, they work, but convention is that a lot of people will put them at the bottom of their body in their markups, if Astro inserts their stuff after that at the bottom, things should be okay.

Steps to Reproduce

npm init astro using template starter-kit

go to pages/index.astro and replace with:

---
---
<html lang="en">
<head>
<!-- Put in head, does not work in body: -->
<script type="importmap">
{
"imports": {
  "@divriots/infini-scroll/define": "https://ga.jspm.io/npm:@divriots/infini-scroll@0.3.1/infini-scroll.js"
}
}
</script>
<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
<script async src="https://ga.jspm.io/npm:es-module-shims@0.12.1/dist/es-module-shims.min.js"></script>
<script type="module">
import '@divriots/infini-scroll/define';
</script>
</head>
<body>
<main>
<infini-scroll style="width: 200px;" box-width="70" container-height="70">
  <div style="margin: 10px; width: 50px; height: 50px; background-color: pink;"></div>
  <div style="margin: 10px; width: 50px; height: 50px; background-color: pink;"></div>
  <div style="margin: 10px; width: 50px; height: 50px; background-color: pink;"></div>
  <div style="margin: 10px; width: 50px; height: 50px; background-color: pink;"></div>
  <div style="margin: 10px; width: 50px; height: 50px; background-color: pink;"></div>
</infini-scroll>
</main>
</body>
</html>

See it working!
Now move the scripts all to the bottom of tag.
Error! See description, I posted a screenshot there.

Link to Minimal Reproducible Example (Optional)

No response

FredKSchott commented 3 years ago

If you place the import map in the body, can you share the full HTML output of what the page looks like? I'm curious why this would be happening.

tony-sull commented 2 years ago

Hey, this issue is out of date and may have been fixed in the latest version of Astro. If you can still reproduce the issue with the latest version of astro (npm install astro@next) please open a new issue and we can take a deeper look. :+1:

withastro / astro