Using MDX and building for production outputs both optimized and original image assets

[ddotlic]

What version of starlight are you using?

0.17.1

What version of astro are you using?

4.2.6

What package manager are you using?

yarn 1.x

What operating system are you using?

macOS 14.3

What browser are you using?

Not browser specific

Describe the Bug

When the documentation is in "plain" Markdown files .md then the images get optimized and copied out into dist/_astro.

As soon as we renamed all the documentation files to .mdx (was a necessity, needed to use Astro/Starlight components), building for production yields both optimized and original assets. Specifically, am talking about images placed in src/assets (those in public are IIUC not optimized anyway).

To repro, simply create a new project, add a .png image to assets and reference it from a .md file and then build - you should get a single .webp image. Renaming to .mdx and changing nothing else, will yield the same screenshot being output twice - once as .webp and once as .png (renamed, but otherwise identical).

Yes, I am aware that I could post-process the build result and remove the .png files from the output, but it's not in the spirit of this project IMO where the tooling is so good and nothing needs silly tweaking.

Important: was unable to figure out how to add an image to StackBlitz, the repro needs a single Screenshot.png in the assets folder.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-bwwxgj-kxfzr1?file=src%2Fcontent%2Fdocs%2Freference%2Fcool.mdx

Participation

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

[delucis]

Thanks for the issue @ddotlic! I also believe this should work in MDX the same way it does in Markdown, not sure why it might not.

As this behaviour is fully controlled by Astro, which Starlight builds on top of, I will transfer this over to that repository to be looked at.

[Princesseuh]

What I can only assume to be our JSX renderer is trying to access $$slot on the image import, since we keep the image on any access, it causes the original image to stay wrongly.

I think the proper fix would be to investigate, why it's trying to access $$slot in the first place, and if that's a valid thing to do, add an exception to the proxy here: https://github.com/withastro/astro/blob/main/packages/astro/src/assets/utils/proxy.ts

[ddotlic]

@Princesseuh Thank you! Can confirm that this does indeed resolve this issue. Cheers!