Skip to content
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

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

Closed
jorenbroekema opened this issue Sep 1, 2021 · 2 comments
Closed

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

jorenbroekema opened this issue Sep 1, 2021 · 2 comments

Comments

@jorenbroekema
Copy link

What package manager are you using?

npm

What operating system are you using?

Windows (WSL2)

Describe the Bug

WICG/import-maps#248 related, explains it a bit more, see also apollographql/apollo-client-devtools#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:
image

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

  1. npm init astro using template starter-kit
  2. 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>
  1. See it working!
  2. Now move the scripts all to the bottom of tag.
  3. Error! See description, I posted a screenshot there.

Link to Minimal Reproducible Example (Optional)

No response
@jorenbroekema jorenbroekema changed the title 🐛 BUG: importmaps break due to ES Modules inserted top of body 🐛 BUG: importmaps break due to module script load triggered before Sep 1, 2021
@FredKSchott
Copy link
Member

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
Copy link
Contributor

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. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@FredKSchott @tony-sull @jorenbroekema