How to use npm modules client-side in Astro.js `.astro` files

This blog is out of date.

Check out Scripts and Event Handling | Docs (astro.build). Importing scripts in Astro now works exactly how you would expect. 🥳

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 doesn’t let you import npm modules in inline script tags within .astro unfortunately. 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.