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

Module aliases not working #671

Closed
marvinhagemeister opened this issue Jun 29, 2023 · 5 comments
Closed

Module aliases not working #671

marvinhagemeister opened this issue Jun 29, 2023 · 5 comments
Labels
browser Not working in Browser

Comments

@marvinhagemeister
Copy link
Contributor

Aliasing react and react-dom to preact/compat seems to sometimes work and sometimes not.

Works:

Doesn't work because it pulls in react-dom even when ?alias is set:

Failing module

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "preact": "https://esm.sh/preact",
          "preact/": "https://esm.sh/preact/",
          "preact/compat": "https://esm.sh/preact/compat",
          "preact/jsx-runtime": "https://esm.sh/preact/jsx-runtime",
          "flowbite-react": "https://esm.sh/flowbite-react@v0.4.9?alias=react:preact/compat,react-dom:preact/compat"
        }
      }
    </script>
    <div id="app"></div>
    <script type="module">
      import { render, h } from "preact";
      import { Button } from "flowbite-react";

      render(h(Button, null, "Click me"), document.getElementById("app"));
    </script>
  </body>
</html>

Error message

None, because it renders nothing as react-dom is pulled in instead of preact.

Additional info

  • esm.sh version: 126
  • Browser version: Chrome 114.0.5735.133
@marvinhagemeister marvinhagemeister added the browser Not working in Browser label Jun 29, 2023
@ije
Copy link
Member

ije commented Jun 29, 2023

thanks! i will look into it

@ije
Copy link
Member

ije commented Jun 30, 2023

you can use ?external param with import maps:

 <script type="importmap">
  {
    "imports": {
      "preact": "https://esm.sh/preact",
      "preact/": "https://esm.sh/preact/",
      "react": "https://esm.sh/preact/compat",
      "react-dom": "https://esm.sh/preact/compat",
      "flowbite-react": "https://esm.sh/flowbite-react@v0.4.9?external=react,react-dom"
    }
  }
</script>

@ije
Copy link
Member

ije commented Jun 30, 2023

Works:

https://esm.sh/@headlessui/react@1.7.14?alias=react:preact/compat,react-dom:preact/compat
Doesn't work because it pulls in react-dom even when ?alias is set:

https://esm.sh/flowbite-react@v0.4.9?alias=react:preact/compat,react-dom:preact/compat

there is a bug of handing subpath of alias (react/jsx-runtim in this case)

@ije
Copy link
Member

ije commented Jun 30, 2023

i will fix ASAP

@ije ije closed this as completed in 8e10bbc Jun 30, 2023
@marvinhagemeister
Copy link
Contributor Author

Good call on using external and just setting the alias inside the import map. I didn't think of that 👍

Thanks for fixing the runtime aliasing issue 🙌

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

No branches or pull requests
2 participants
@marvinhagemeister @ije