Svelte components do not integrate with MDX anymore after upgrade to v4

[CaspianVahagn]

Astro Info

❯ astro info
Astro                    v4.0.3
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/svelte

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

all browsers

Describe the Bug

I recently migrated from Astro v3 to v4
I use svelte components.

Now the svelte components do not integrate with mdx anymore:

I created a simple svelte component CustomButton.svelte :

<div class="wrappy">
   <button>Svelte button</button>
</div>

<style>
  .wrappy{
    border: 1px solid orange;
    width: 300px;
    height: 300px;
  }
  .wrappy > button{
    font-weight: bold;
    color: orange;
  }
</style>```

Inserted the component into a MDX file: 

```html
---
title: 'Using MDX'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 02 2022'
heroImage: '/blog-placeholder-5.jpg'
---

import CustomButton from '../../components/CustomButton.svelte';

<CustomButton></CustomButton>

And it gets rendered as undefined.

But in .astro files it gets rendered

Reproduced with Minimal example on stackblitz from Astro-blog template.

When I rolled back to Astro v3 it worked again.

Also when trying to reinstall the dependencies (reproducable by refreshing the stackblitz minimal example)

It appears that there might be some issue with Vite 5 or svelte v5 and the svelte HMR plugin dependecies.
Maybe this could be related.

What's the expected result?

Svelte components being rendered in mdx.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-dp9jem

Participation

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

[bluwy]

Are you also using Svelte 5 in Astro 3? Svelte 5 doesn't support HMR yet and it's still experimental

[CaspianVahagn]

@bluwy
Thanks for noticing this.
No I use "svelte": "^4.2.8".
But yes after adjusting the project for svelte versions it works again.
Yet it was a bit unexpected, since
https://docs.astro.build/en/guides/upgrade-to/v4/

On the upgrade guide the command:
npx @astrojs/upgrade

Suggests updating svelte to a higher version.
Maybe I should have said "no" since it is still experimental.
But maybe this could be added into the documentation when upgrading to v4,
that it is currently not compatible with svelte 5.

Also when using:
npx astro add svelte

Svelte 5 is suggested, maybe this might be a little misleading when setting up the project in the current state:

[bluwy]

npx @astrojs/upgrade

Suggests updating svelte to a higher version.

I don't see that happening locally, it only suggests updating astro and @astrojs/svelte.

npx astro add svelte

Svelte 5 is suggested, maybe this might be a little misleading when setting up the project in the current state:

That's being fixed at #9387

[CaspianVahagn]

@bluwy

npx @astrojs/upgrade
Suggests updating svelte to a higher version.

I don't see that happening locally, it only suggests updating astro and @astrojs/svelte.

npx astro add svelte
Svelte 5 is suggested, maybe this might be a little misleading when setting up the project in the current state:

That's being fixed at #9387

Thank you for you reply.
Then I might have done something aditionally when retrying, after my first failed update.
I had to clear node_modules, because of some other bugs, maybe I ran:
npx astro add svelte
Manually after that.

But thank you again, for you quick reply.
I will take a look into my project, and try again to update it to v4.