Vite's define dev-mode timing issues in .astro files

[AriPerkkio]

Astro Info

Astro                    v4.15.0
Node                     v20.15.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

In development mode, it's possible that values defined in Vite's define are not present in .astro files immediately. Note that there is a difference in Vite how define works when comparing dev and prod modes - prod uses static replacements, dev adds them to globalThis on runtime.

Maybe Astro is loading .astro files before Vite defines values from define? Is Astro now too fast?

import { defineConfig } from "astro/config";

export default defineConfig({
  vite: {
    define: {
      __MY_DEFINE__: '"Value set in config"',
    },
  },
});

---
const frontmatter = __MY_DEFINE__;
---

<h1>My Component</h1>

<script define:vars={{frontmatter}}>
  console.log({frontmatter, scriptScope: globalThis.__MY_DEFINE__})

  setTimeout(() => {
    console.log({frontmatter, scriptScope: globalThis.__MY_DEFINE__})
  }, 1000)
</script>

What's the expected result?

Values defined in Vite's define should always be present, even in .astro files. The define option should provide similar results in dev as it does in prod.

Link to Minimal Reproducible Example

https://stackblitz.com/~/edit/github-5kyhn9?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.