#Using import instead of script

4 messages · Page 1 of 1 (latest)

inner wraith
#

I want to use import "@tailwindplus/elements"; instead of having to add <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1"></script> to the buttom. But it doesn't work when I add @tailwindplus/elements, it only seems to work when I add the script tag

heady girderBOT
#

Hi @inner wraith. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To use @tailwindplus/elements in Astro, you need to consider how Astro handles JavaScript imports versus loading scripts via a <script src="..."> tag.

Why <script src="..."> Works

When you add:

<script src="<https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1"></script>>

at the bottom of your page, you are loading the library as a global script from a CDN. This makes its features available globally in the browser, which is how many traditional JavaScript libraries are designed to work.

Why import "@tailwindplus/elements"; May Not Work

When you use:

import "@tailwindplus/elements";

in your Astro component or frontmatter, Astro tries to import and bundle the package as an ESM module. However, not all packages are designed to work this way—especially those intended to be loaded as global scripts. If @tailwindplus/elements is not published as an ESM module or expects to run in a browser environment (not during server-side rendering), the import may not have any effect, or could even cause errors.

Astro components run on the server by default, so browser-only code (like code that manipulates the DOM) will not work unless it is placed inside a <script> tag that is sent to the client. This is a common issue with packages that are not designed for ESM or SSR environments see here.

Recommended Approach

#

If the package is only available as a global script, you should continue to use the <script src="..."> method. If you want to load it from your own public/ directory, you can download the script and reference it like this:

<script is:inline src="/path-to/@tailwindplus/elements.js"></script>

This skips Astro's processing and loads the script as-is in the browser see here.

If the package is available as an ESM module and is compatible with Astro's build process, you can import it in your component frontmatter or in a client-side <script> tag. But if it only works as a global script, importing it will not have the desired effect.

Summary

  • Use <script src="..."></script> for global scripts or those not compatible with ESM.
  • Use import only if the package is published as an ESM module and is compatible with Astro's build process.

If @tailwindplus/elements only works via a script tag, you should continue using that method. The knowledge sources do not provide a way to make a non-ESM package work with import in Astro see here.

If you need further integration, check if the package author provides an ESM build or consider wrapping the script loading in a custom component.

References:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: