Error trying to render the Advanced Tables block

[SumitBando]

Describe the bug

Error while trying to render the page with code from https://flowbite-svelte-blocks.vercel.app/application/advanced-tables

TypeError: Cannot read properties of undefined (reading 'div')
at /home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/flowbite-svelte-blocks/dist/Section.svelte:109:42
at Object.$$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at eval (/home/sumit/ui-tests/flowbite/src/routes/table/+page.svelte:96:102)
at Object.$$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at Object.default (/home/sumit/ui-tests/flowbite/.svelte-kit/generated/root.svelte:44:41)
at eval (/home/sumit/ui-tests/flowbite/src/routes/+layout.svelte:11:41)
at Object.$$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at /home/sumit/ui-tests/flowbite/.svelte-kit/generated/root.svelte:43:40
at $$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at Object.render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:164:17)

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-nwucpj?file=src%2Froutes%2F%2Bpage.svelte

Flowbite version and System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 1.87 GB / 7.63 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node
    npm: 10.2.0 - ~/.nvm/versions/node/v20.8.1/bin/npm
    pnpm: 8.11.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @sveltejs/kit: ^1.27.4 => 1.27.6
    flowbite-svelte: ^0.44.20 => 0.44.20
    svelte: ^4.2.7 => 4.2.8
    vite: ^4.4.2 => 4.5.0

[Blochergroup]

Same error here

[taimoor-shan]

Same here

[taimoor-shan]

Describe the bug

Error while trying to render the page with code from https://flowbite-svelte-blocks.vercel.app/application/advanced-tables

TypeError: Cannot read properties of undefined (reading 'div') at /home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/flowbite-svelte-blocks/dist/Section.svelte:109:42 at Object.$$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16) at eval (/home/sumit/ui-tests/flowbite/src/routes/table/+page.svelte:96:102) at Object.$$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16) at Object.default (/home/sumit/ui-tests/flowbite/.svelte-kit/generated/root.svelte:44:41) at eval (/home/sumit/ui-tests/flowbite/src/routes/+layout.svelte:11:41) at Object.$$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16) at /home/sumit/ui-tests/flowbite/.svelte-kit/generated/root.svelte:43:40 at $$render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:156:16) at Object.render (/home/sumit/ui-tests/flowbite/node_modules/.pnpm/[email protected]/node_modules/svelte/src/runtime/internal/ssr.js:164:17)

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-nwucpj?file=src%2Froutes%2F%2Bpage.svelte

Flowbite version and System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 1.87 GB / 7.63 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node
    npm: 10.2.0 - ~/.nvm/versions/node/v20.8.1/bin/npm
    pnpm: 8.11.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @sveltejs/kit: ^1.27.4 => 1.27.6
    flowbite-svelte: ^0.44.20 => 0.44.20
    svelte: ^4.2.7 => 4.2.8
    vite: ^4.4.2 => 4.5.0

found anything?

[stav]

<Section name="advancedTable" classSection='...'>

Type '"advancedTable"' is not assignable to type '"blog" | "comment" | "cta" | "ctawithimg" | "contact" | "content" | "contentwithimg" | "crudcreatedrawer" | "crudcreateform" | "crudreadsection" | "default" | "faq" | "feature" | ... 20 more ... | undefined'. -- js(2322)

TypeError: Cannot read properties of undefined (reading 'div')

at ~/coster/node_modules/flowbite-svelte-blocks/dist/Section.svelte:109:42
at Object.$$render (~/coster/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at eval (~/coster/src/routes/admin/clients/list.svelte:137:102)
at Object.$$render (~/coster/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at eval (~/coster/src/routes/admin/clients/+page.svelte:36:88)
at Object.$$render (~/coster/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at Object.default (~/coster/.svelte-kit/generated/root.svelte:54:44)
at ~/coster/src/routes/admin/+layout.svelte:84:34
at Object.$$render (~/coster/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at Object.default (~/coster/.svelte-kit/generated/root.svelte:48:42)

[stav]

There is no tag yet for this code so install using commit hash:

pnpm add -D themesberg/flowbite-svelte-blocks#f10cc3f

So then in package.json you'll have:

"flowbite-svelte-blocks": "themesberg/flowbite-svelte-blocks#f10cc3f",

Then build manually:

cd node_modules/flowbite-svelte-blocks
pnpm i
pnpm run build

Then import directly from node_modules

  import { Section } from '../../../../node_modules/flowbite-svelte-blocks';

Then it should work:

<Section name="advancedTable" classSection='...'>

[notjulian]

There is no tag yet for this code so install using commit hash:

@shinokada

can you please create one ....

thanks so much

[shinokada]

@notjulian Done.

[Quephara]

tried to use the table and failed, had to manually install the directory : [src/routes/utils]. npm seems to not reliably install or the published repo does not include everything.

also, i am a beginner, this is the first time using a framework for frontend, on the website, [tailwind-config.js] is indicated as [tailwind-config.cjs], the config does not indicate what to do with the existing values.

it could really use comments like :

// start here
plugins = "..... , ....."

or

// replace everything with

thank you for your time