import X from Y in Astro

I needed more than 3 attempts to understand it. I’ll try to save you time.

The way to do it

Sample .astro file:

‑‑‑
import Layout from '@layouts/Default.astro'
‑‑‑

<Layout>
  This is just an example
</Layout>

<script>
  import X from 'y';
	
  // X is at your disposal
</script>

If you want to copy and paste the code above, replace ‑ (non‑breaking hyphens) with - (hyphen‑minuses).

is:inline won’t work

<script is:inline> is for unprocessed scripts. If you try to use it, you’ll get one of these errors:

• Uncaught SyntaxError: import declarations may only appear at top level of a module

• Uncaught SyntaxError: Cannot use import statement outside a module

• SyntaxError: Unexpected token '{'. import call expects one or two arguments.

define:vars is for JSON‑serializable variables

JavaScript objects are not 100% JSON‑serializable. If you import your library at the top of your .astro file and try to pass it to your <script is:inline> below, you’ll only get a confusing shadow of the original library object.

Read about define:vars in the documentation

February 10, 2026

Tags: astro, import, from, is:inline, inline, third, 3rd, party, library, lib, javascript, js, scripts, event handling, client-side, define:vars, vars