#Astro regression with dynamic imports and HMR issue

9 messages · Page 1 of 1 (latest)

fast niche
#

I have a .astro file which looks like this:

<button class="my-button">I am a button efdefqfqef</button>

<button class="my-button" full-width>I am a button fluid</button>

<style>
    @import "@jack/web-components/dist/button/button.css";
</style>

On Astro 6.0.6, I have to hit cmd + s multiple times before the style shows but at least when I type and change the button text, HMR refreshes.

From version "astro": "6.0.7", the style now does load correctly but HMR does not respond to changes to the content.

What can I do?

This is my dynamic route file:

---
import "@jack/web-components/dist/index.css";
import ExamplesHead from "#docs/components/core/ExamplesHead.astro";

export async function getStaticPaths() {
    const componentExamples = import.meta.glob("../../../examples/components/**/[^_]*.astro");

    const paths = [];
    for (const entry of Object.keys(componentExamples)) {
        const slug = entry.replace("../../../examples/components/", "").replace(".astro", "");
        paths.push({
            params: { slug: slug },
            props: {
                componentPath: slug,
                entryPath: entry
            },
        });
    }
    return paths;
}

const { entryPath } = Astro.props;
const componentModule = await import.meta.glob("../../../examples/components/**/[^_]*.astro")[entryPath]() as { default: any };
const Component = componentModule.default;
---

<!doctype html>
<html lang="en">
    <head>
        <ExamplesHead title="Component mockup" />
    </head>
    <body>
        <main data-pagefind-ignore>
            <!-- Start of component mockup -->
            <Component />
            <!-- End of component mockup -->
        </main>
    </body>
</html>
hoary sequoiaBOT
#

Hi @fast niche. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The knowledge sources don't contain enough specific information to diagnose or resolve the HMR regression you're experiencing between Astro 6.0.6 and 6.0.7, particularly around dynamic import.meta.glob() usage and style loading behavior.

That said, I can point out a few things based on what the docs do cover:

Regarding your dynamic route pattern:

Your getStaticPaths() usage looks correct — you're using import.meta.glob() with eager: false (lazy) to collect paths, and then dynamically importing the matched component at render time. [Static SSG Mode]

One thing worth noting: the getStaticPaths() function executes in its own isolated scope, so the import.meta.glob() call inside it is separate from the one used later to load the component. This is expected behavior. [getStaticPaths()]

Regarding the CSS @import and style loading:

Astro 6.0 changed how <script> and <style> tags are rendered — they are now output in the order they are defined in source code. If you were relying on a specific ordering behavior from 6.0.x, this could potentially interact with your @import from an npm package. [Script and Style Order]

Also, when importing CSS from an npm package without a file extension, you may need to add the package to vite.ssr.noExternal in your Astro config. [External Styles]

What I'd recommend:

Since this appears to be a regression introduced in a specific patch version (6.0.7), the best course of action would be to:

#
  1. File a bug report on the Astro GitHub repository with a minimal reproduction, since this is likely a framework-level issue.
  2. Pin to 6.0.6 temporarily if the HMR behavior is more critical to your workflow than the style loading fix.

The knowledge sources don't contain enough detail about the internal changes between these patch versions to provide a definitive fix.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fast niche Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fast niche
#

cool thanks. now in mdx files, can i import the text content of components? I want put the source code within the <code> block.

E.g.

import DefaultButton from "#examples/components/my-button/default.astro" { with: raw????};

#

@hoary sequoia

cool thanks. now in mdx files, can i import the text content of components? I want put the source code within the <code> block.

E.g.

import DefaultButton from "#examples/components/my-button/default.astro" { with: raw????};

hoary sequoiaBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Yes! You can import any file as a raw string using Vite's ?raw import suffix, and this works in MDX files. You can then pass that string to a <Code> component.

Here's how to do it in an MDX file:

import { Code } from '@astrojs/starlight/components';
import importedCode from '/src/examples/components/my-button/default.astro?raw';

<Code code={importedCode} lang="astro" title="default.astro" />

Or if you're using Astro's built-in <Code /> component instead of Starlight's:

import { Code } from 'astro:components';
import importedCode from '/src/examples/components/my-button/default.astro?raw';

<Code code={importedCode} lang="astro" />

The ?raw suffix tells Vite to import the file's contents as a plain string rather than executing/processing it. [Display imported code] [<Code />]

So your syntax would be:

import DefaultButton from "#examples/components/my-button/default.astro?raw";

Note that with ?raw, the import gives you the raw text content of the file — not the component itself. If you also need the component to render it, you'd need a second import without ?raw.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: