Import error: Nabar Example

[InvalidLenni]

Description

I'm trying to import

<script lang="ts">
    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Avatar, Dropdown, DropdownItem, DropdownHeader, DropdownGroup } from "flowbite-svelte";
</script>

but it doen't work, it says

Svelte: Module '"flowbite-svelte"' has no exported member 'Navbar'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavBrand'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavLi'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavUl'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavHamburger'.
Svelte: Module '"flowbite-svelte"' has no exported member 'Avatar'.
Svelte: Module '"flowbite-svelte"' has no exported member 'Dropdown'.
Svelte: Module '"flowbite-svelte"' has no exported member 'DropdownItem'.
Svelte: Module '"flowbite-svelte"' has no exported member 'DropdownHeader'.
Svelte: Module '"flowbite-svelte"' has no exported member 'DropdownGroup'.

Minimal Reproduction

https://flowbite-svelte.com/docs/components/navbar

Steps to Reproduce

You need to create a +page.svelte file (in normal case its already created - default file) and then copy paste these things, i posted above.

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
    Memory: 1.48 GB / 13.90 GB
  Binaries:
    Node: 24.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.27.0 - C:\Users\Administrator\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (143.0.3650.96)

Relevant Logs / Console Output

Svelte: Module '"flowbite-svelte"' has no exported member 'Navbar'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavBrand'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavLi'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavUl'.
Svelte: Module '"flowbite-svelte"' has no exported member 'NavHamburger'.
Svelte: Module '"flowbite-svelte"' has no exported member 'Avatar'.
Svelte: Module '"flowbite-svelte"' has no exported member 'Dropdown'.
Svelte: Module '"flowbite-svelte"' has no exported member 'DropdownItem'.
Svelte: Module '"flowbite-svelte"' has no exported member 'DropdownHeader'.
Svelte: Module '"flowbite-svelte"' has no exported member 'DropdownGroup'.

Screenshots / GIF (optional)

No response

Additional Context (optional)

No response

Checklist

• I have searched existing issues and discussions
• I have provided a minimal and runnable reproduction
• I am using the latest version of Flowbite-Svelte

[shinokada]

Did you follow this? https://flowbite-svelte.com/docs/pages/introduction

[InvalidLenni]

yes

[shinokada]

Did you update src/routes/layout.css by adding the following as described in https://flowbite-svelte.com/docs/pages/introduction#configuration?

@import "tailwindcss";

@plugin 'flowbite/plugin';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;

  --color-secondary-50: #f0f9ff;
  --color-secondary-100: #e0f2fe;
  --color-secondary-200: #bae6fd;
  --color-secondary-300: #7dd3fc;
  --color-secondary-400: #38bdf8;
  --color-secondary-500: #0ea5e9;
  --color-secondary-600: #0284c7;
  --color-secondary-700: #0369a1;
  --color-secondary-800: #075985;
  --color-secondary-900: #0c4a6e;
}

@source "../../node_modules/flowbite-svelte/dist";
@source "../../node_modules/flowbite-svelte-icons/dist";

@layer base {
  /* disable chrome cancel button */
  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }
}

[shinokada]

Try using "moduleResolution": "bundler" for tsconfig.json:

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"rewriteRelativeImportExtensions": true,
		"allowJs": true,
		"checkJs": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
                "module": "NodeNext",
		"moduleResolution": "bundler"
	}
}