Component script in MDX gets loaded in different order compared to regular loading

sdegroot commented 3 months ago

Astro Info

Astro                    v4.10.1
Node                     v20.11.0
System                   macOS (arm64)
Package Manager          unknown
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/tailwind
                         @astrojs/mdx
                         astro-htmx
                         astro-icon
                         @astrojs/alpinejs

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

No response

Describe the Bug

I am loading a date picker component in two ways: directly on pages and through mdx rendering.

Given the following mdx file:

---
title: DatePicker
--- 
import DatePicker from '~/components/ui/stations/DatePicker.astro'
<DatePicker />

Results into the following outputted HTML:

    <script type="module" src="/@id/astro:scripts/page.js"></script>
    <script type="module" src="/src/components/ui/Loading.astro?astro&type=style&index=0&lang.css"></script>
    <script type="module" src="/src/styles/globals.css"></script>
    <script type="module" src="/node_modules/.pnpm/aos@2.3.4/node_modules/aos/dist/aos.css"></script>
    <script type="module" src="/src/components/ui/stations/DatePicker.astro?astro&#38;type=script&#38;index=0&#38;lang.ts"></script>

Whereas including the date picker in any other location (outside of MDX), it results into the following output:

   <script type="module" src="/src/components/ui/stations/DatePicker.astro?astro&type=script&index=0&lang.ts"></script>
    <script type="module" src="/src/components/ui/accordion/AccordionContainer.astro?astro&type=script&index=0&lang.ts"></script>
    <script type="module" src="/src/components/ui/carousel/Carousel.astro?astro&type=script&index=0&lang.ts"></script>
    <script type="module" src="/@vite/client"></script>
    <script type="module" src="/@fs/Users/sdegroot/scm/zoefapp/aha.zoef.app/zoefapp-website/node_modules/.pnpm/astro@4.10.1_@types+node@20.14.2_typescript@5.4.5/node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.js?v=a4b7bf2e"></script>
    <script>
    window.__astro_dev_toolbar__ = {
        "root": "/Users/sdegroot/scm/zoefapp/aha.zoef.app/zoefapp-website/",
        "version": "4.10.1",
        "debugInfo": "Astro                    v4.10.1\nNode                     v20.11.0\nSystem                   macOS (arm64)\nPackage Manager          npm\nOutput                   hybrid\nAdapter                  @astrojs/vercel/serverless\nIntegrations             @astrojs/tailwind\n                         @astrojs/mdx\n                         astro-htmx\n                         astro-icon\n                         @astrojs/alpinejs\n                         @astrojs/vercel/serverless"
    }
    </script>
    <script type="module" src="/@id/astro:scripts/page.js"></script>
    <script type="module" src="/src/styles/globals.css"></script>
    <script type="module" src="/node_modules/.pnpm/aos@2.3.4/node_modules/aos/dist/aos.css"></script>
    <script type="module" src="/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/themes/dark.css"></script>

I get the impression that there is some kind of encoding issue, as you can clearly see a difference between the two script tags:

   <script type="module" src="/src/components/ui/stations/DatePicker.astro?astro&type=script&index=0&lang.ts"></script>

Compared to 

    <script type="module" src="/src/components/ui/stations/DatePicker.astro?astro&#38;type=script&#38;index=0&#38;lang.ts"></script>

Because of this bug, the DatePicker code is loading after the initialization of alpine. Thus resulting into errors.

What's the expected result?

The loading of an Astro component should work exactly the same within MDX and outside of MDX. I think the problem may originate in the encoding as mentioned before. Not sure if this does anything with the order?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nr2wow-eaomiy

When you check out the provided reproducible example, you will find that the root url shows a working date picker and the two links on that page fail for different reasons.

Participation

[x] I am willing to submit a pull request for this issue.

ascorbic commented 3 months ago

Hey. This issue with the missing renderer looks like it's because you're doing let Content = await render(); rather than let { Content } = await render();

For the other part it looks like you're right about the core of the issue: Alpine is loading before the other parts of the page. I'll defer to someone else to look into this a bit more.

matthewp commented 2 months ago

There's not a styles/global.css in this project. Does this not reflect your real project?

matthewp commented 2 months ago

I think this loading is correct. DatePicker.astro is last because it is dynamically rendered when you do:

let {render} = await getEntry('examples', 'datepicker')
let Content = await render()

All of the other styles are hoisted and known up-front. In general it's not a good idea to have implicit dependencies where you find yourself depending on ordering which can be difficult to reason about.

withastro / astro