themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2.24k stars 273 forks source link

P tag can not contain div tag (badge) #1489

Open juanem1 opened 5 days ago

juanem1 commented 5 days ago

Describe the bug

The badge tag is a div element if we try to create badges inside a P element we will get this error:

node_invalid_placement_ssr: `<p>` (node_modules/flowbite-svelte/dist/typography/P.svelte:69:0) cannot contain `<div>` (node_modules/flowbite-svelte/dist/badge/Badge.svelte:60:2)

This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.

Reproduction

<script>
  import { P, Badge } from 'flowbite-svelte'
</script>

<div>
  <P>
    This badge is throwing an error: <Badge large>some text</Badge>
  </P>
</div>

Flowbite version and System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 67.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Brave Browser: 131.1.73.89
    Chrome: 130.0.6723.117
    Safari: 18.0
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.7.3 
    flowbite-svelte: ^0.47.3 => 0.47.3 
    svelte: ^5.0.0 => 5.1.2 
    vite: ^5.0.3 => 5.4.10