🐛 BUG: astro complains about missing import on start

[WickyNilliams]

What version of @astrojs/compiler are you using?

2.7.0

What package manager are you using?

npm

What operating system are you using?

mac

Describe the Bug

If I use astro's <Code> component in a page for vue code, and the vue code contains an import statement, astro thinks it's an actual import statement.

<Code 
  lang="vue"
  code={`
<script setup>
import 'something';
</script>
<template>
  <calendar-range :months="2">
    <calendar-month />
    <calendar-month :offset="1" />
  </calendar-range>
</template>
`.trim()} 
/>

i get the following error in the console on start:

16:59:37 [ERROR] [vite] Error: The following dependencies are imported but could not be resolved:

  something (imported by /home/projects/astro-import-inside-code-string-repro/src/pages/index.astro?id=0)

Are they installed?
    at eval (/home/projects/astro-import-inside-code-string-repro/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:52555:23)
    at async eval (/home/projects/astro-import-inside-code-string-repro/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:52021:38)

I suspect this is caused by the <script> tag in the code string, more than the lang being vue. but of course in vue components, script tags are common

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-import-inside-code-string-repro?file=src%2Fpages%2Findex.astro%3AL16

[MoustaphaDev]

This is probably an issue in our vite setup, or vite itself, not sure. Moving to the main repo.

[bluwy]

This is an edgecase in Vite's prebundling scanner, where it'll try to scan for dependencies to be optimize when starting up the server. For Astro files, it'll try to grab imports in <script> tags as those are likely used on the client side, as Astro also support processing script tags.

The issue with Vite's scanner is that it's very loose and uses a regex to capture script tags as is. So in your example, it mistakens the script tag in the template literal as an actual script tag.

There's not an easy fix for this in either Vite or Astro at the moment. I'd suggest working around it by splitting the script as '<scrip' + 't>', splitting the import, or placing that string literal in a separate JS file.

[WickyNilliams]

Interesting, thanks for digging into it. If it's a problem with vite, would I be able to replicate in Vue I wonder?

[bluwy]

If you put that markup in a Vue component (or any matching here), you should also see the issue happening in a Vite setup. It's an accepted drawback in Vite at the moment that requires a significant refactor, like using rolldown.