Hydration mismatch error is not shown if the mismatch is caused by an Async Component

[RodrigoProjects]

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/github-iuwbtr?file=package.json,components%2FHydrationMismatch.vue,app.vue

Steps to reproduce

(The reproduction is in a StackBlitz for Nuxt 3 because it happens when Vue SSR is involved and it's just faster and easier to explain the issue there)

• Just run the StackBlitz
• Open the console.
• No error with hydration will be found even tho the Async Component has a Hydration Mismatch.

What is expected?

An error at the console should be displayed "Hydration completed but contains mismatches"

Context image

What is actually happening?

No message is found at the console with the mismatch error.

System Info

Not important, tell me otherwise please.

Any additional comments?

This issue was opened at the Nuxt 3 repo (nuxt/nuxt#23590) first because of a recomendation made at discord but I was almost 100% sure the issue was at the Vue counterpart.

I did a bit of debugging in that issue regarding the problem so a lot of context is there, it may be worth a read!

[baiwusanyu-c]

Duplicate with #9033

[RodrigoProjects]

@baiwusanyu-c can't really see the duplication here, the topics seem to be different. Do you mind giving some more elaboration?

[sadeghbarati]

Composable usage restrictions

• Composables usage restrictions #7488

• https://vuejs.org/guide/reusability/composables.html#usage-restrictions

You are using Date api which is defined in both browser and node environment

---

You can create custom composable which return date only on browser

or you can use this nuxt module

https://github.com/danielroe/nuxt-time

[RodrigoProjects]

@sadeghbarati the problem here is not the mismatch (the same happened at this issue and it got closed early nuxt/nuxt#23590), it's the fact the error of a mismatch is not shown if we use an Async Component vs an inline import.

Thanks anyways! :)