How to use node module imports in Astro js #120760
-
BodyI have come across an issue where i can't import node modules in .astro files ,when i use inside script tags or top like thiswhen i run x with astro build as command for the build in package.json
Error thrown respectively
Guidelines
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
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 For your first code snippet (Image 1), the code seems to be correctly wrapped inside a 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 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 Alternatively, you can also use the <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 |
Beta Was this translation helpful? Give feedback.
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 theis: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. Im…