flowbite-svelte
flowbite-svelte copied to clipboard
Unable to use Flowbite-svelte components in Astro app - getContext returns undefined
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