Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
juanem1 opened this issue Nov 18, 2024 · 0 comments
Open

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

juanem1 opened this issue Nov 18, 2024 · 0 comments

Comments

@juanem1
Copy link

juanem1 commented Nov 18, 2024

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant