themesberg / flowbite-svelte

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

Unable to use Flowbite-svelte components in Astro app - getContext returns undefined #1200

Open nikhilk opened 8 months ago

nikhilk commented 8 months ago

Describe the bug

Note: I ran into this issue using DropDown, but possibly this is more general.

Context -- I am using Astro + svelte and adding a Flowbite-svelte component. I did a sanity check with a component such as Alert and it worked fine. Here are the versions of packages I am using.

    "@astrojs/svelte": "^5.0.3",
    "@astrojs/tailwind": "^5.1.0",
    "astro": "^4.0.8",
    "svelte": "^4.2.5",
    "tailwindcss": "^3.4.0",
    "flowbite": "^2.2.1",
    "flowbite-svelte": "^0.44.21",
    "flowbite-svelte-icons": "^0.4.5"

index.astro

---
import { Alert } from 'flowbite-svelte';
import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
import { ChevronDownSolid } from 'flowbite-svelte-icons';
---

<Alert color="blue">...</Alert>

<Button>Dropdown button<ChevronDownSolid class="w-3 h-3 ms-2 text-white dark:text-white" /></Button>
<Dropdown>
<DropdownItem>Dashboard</DropdownItem>
</Dropdown>

Result

Cannot read properties of undefined (reading 'subscribe')

The error is on the line using activeUrlStore. It is undefined. If I remove the line to subscribe, the page loads.

dropdown/DropdownItem.svelte

const activeUrlStore = getContext('activeUrl');
let sidebarUrl = '';
activeUrlStore.subscribe((value) => {         # this is where activeUrlState seems to be undefined
    // console.log('value: ', value)
    sidebarUrl = value;
});

Reproduction

https://stackblitz.com/edit/github-r6snzx

Flowbite version and System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    flowbite-svelte: ^0.44.21 => 0.44.21 
    svelte: ^4.2.5 => 4.2.8
stackblitz[bot] commented 8 months ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.