How to use npm modules client-side in Astro.js `.astro` files
Alex Chiu
Posted on October 13, 2021
I've been playing with Astro some more and finally got my head around how to use npm modules client side in a .astro
file. It's not that obvious...
First thing I tried was something like this:
<!-- Test.astro -->
<canvas class="webgl"></canvas>
<script type="module">
import * as THREE from 'three'
console.log(THREE) //undefined :(
</script>
This returns Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
in the console.
Astro doesnt let you import npm modules in inline script tags within .astro
unfortunatley. However we can import in an external .js
/.ts
file, then make use of Astro.resolve
like so:
<!-- Test.astro -->
<canvas class="webgl"></canvas>
<script src={Astro.resolve('./myScript.js')} type="module"/>
Inside myScript.js
we can import things as expected.
// myScript.js
import * as THREE from 'three';
console.log(THREE) // Three.js module!
Working demo here.
💖 💪 🙅 🚩
Alex Chiu
Posted on October 13, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
tailwindcss How to create a button component with variants and icons with Astro JS and Tailwind CSS
October 2, 2024