How to use node module imports in Astro js

[vickkie]

Body

I have come across an issue where i can't import node modules in .astro files ,

when i use inside script tags or top like this

when i run x with astro build as command for the build in package.json

npm run build   

Error thrown respectively

• cannot use import outside modules
• gsap is not defined

Guidelines

• I have read and understood this category's guidelines before making this post.

[Hadikamali]

The issue you're facing is that you're trying to import modules directly in the Astro file, which is not allowed in Astro. Astro files are a combination of HTML, CSS, and JavaScript, but the JavaScript code needs to be wrapped inside a <script> tag with a specific type attribute.

For your first code snippet (Image 1), the code seems to be correctly wrapped inside a <script> tag with the is:inline directive, which tells Astro to render the script inline in the HTML. However, the issue here might be related to the GSAP library and how it's being registered.

For the second code snippet (Image 2), you're attempting to import modules at the top level of the Astro file, which is not allowed. Imports in Astro files should be done inside a <script> tag with the appropriate type attribute.

Here's how you can fix the issue for the second code snippet:

<script>
import Container from "./../container.astro";
import servicesData from "./../Data/services.json";
import gsap from "gsap";
</script>

This way, the imports are wrapped inside a <script> tag, and Astro will correctly handle them during the build process.

Alternatively, you can also use the is:inline directive if you want the imports to be rendered as inline scripts in the HTML:

<script is:inline>
import Container from "./../container.astro";
import servicesData from "./../Data/services.json";
import gsap from "gsap";
</script>

By following these guidelines, you should be able to resolve the "cannot use import outside modules" and "gsap is not defined" errors you're encountering during the Astro build process.

powered by claude

[vickkie]

Thanks , it finally worked when using is:inline directive

[Hadikamali]

you're welcome.

[karthikjn01]

I'm just running into this issue too, trying to import motion one - https://motion.dev I'm doing exactly this, but getting back:
Uncaught SyntaxError: Cannot use import statement outside a module (at (index):2:3) and when I add a type='module' I get back:
Uncaught TypeError: Failed to resolve module specifier "motion". Relative references must start with either "/", "./", or "../".

Here is my code:

<script is:inline type="module">
  import { animate } from "motion";
  import SplitType from "split-type";
  const text = new SplitType(".animatable-text", { types: "words" });
  const words = text.words ?? [];

  console.log({ words });

  animate(words, {
    duration: 0.5,
    delay: (i) => i * 0.1,
    opacity: [0, 1],
    translateY: [-20, 0],
  });
</script>

Thanks in advance!

EDIT:

I got this working by using import {} from "/node_modules/..."