Named Slot doesn't work correctly on Vue3

[fumiama]

Describe the bug

I'm using Vue3 but the Named Slot didn't work properly.

Steps to reproduce

Just use the code in README,

<vue-advanced-chat>
  <div slot="room-header">
    This is a new room header
  </div>
</vue-advanced-chat>

Result I got

The web is running normally but nothing changed. The room header is not replaced.

If I replace the <div slot="room-header"> to <template #room-header>, it will throw an error

[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first.

Expected behavior

The room header is replaced.

Device

• OS: MacOS Ventura 13.6.5
• Browser: Edge 124.0.2478.51
• Package version: 2.1.0

[fumiama]

I just noticed that the code could take effect sometimes by adjusting the window width or hiding rooms list. But after a refresh, the replacement disappeared. Here is the demo video.

demo.mp4

[ChasingTheTide]

Hit the same error. It might related to the dash in the slot names.

[NightFurySL2001]

Encountered the same error.

For my case, I tried to replace the message_{{ID}} slot. The console reported TypeError: text2.replaceAll is not a function.