Error in DataSource - can't read prop of undefined (reading 'filter')

[jamestagal]

Hi @jimafisk

For the Showcase section of my site, I am trying to set up the on: click events for the ui of the slide_nav component however when trying to reference the project1 content type and extract the order field from the data source, I get the following error: Though I think I am referencing the content correctly!

❯ plenti serve
█████▒▒▒▒▒ Building... 2023/09/27 17:13:04 build.go:158: 
Error in DataSource build step
Can't create props for content/project1/example01.json 
Can't render htmlComponent for layouts_content_project1_svelte
TypeError: Cannot read properties of undefined (reading 'filter')
    at create_ssr:12:31
    at Object.$$render (create_ssr:2043:22)
    at create_ssr:32:108
    at Object.$$render (create_ssr:2043:22)
    at create_ssr:67:97
    at $$render (create_ssr:2043:22)
    at Object.render (create_ssr:2051:26)
    at create_ssr:1:58

In the slides.nav.svelte file I reference the content project1 where the slides are as follows:

let slideNumber = allContent.filter((content) => content.type === "project1");

Then I added a variable to record the selectedSlide as follows:

let selectedSlide;

In the slides.nav.svelte file I am looping over the fields using an #each block. See example for the forward and back buttons only . Then add the selectedSlide variable to the on click event.

{#each slideNumber as slides}
`other code missing here`
   <button on:click={() => selectedSlide = Number(slides.order)} href="h5p/example/slide/{Number(slides.order) - 1}" class="flex items-center justify-center rounded-lg border border-slate-200 bg-transparent p-3" aria-label="back to previous step" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="h-4 w-4 text-slate-800 transition-opacity opacity-50" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"></path></g></svg></button>

  <button on:click={() => selectedSlide = Number(slides.order)} href="h5p/example/slide/{Number(slides.order) + 1}" class="flex h-[42px] select-none items-center rounded-lg px-3 leading-4 transition-[width] duration-300 bg-gradient-to-b from-indigo-500 to-indigo-600 w-[132px] cursor-pointer hover:from-indigo-600 hover:to-indigo-700 ml-4" tabindex="1" aria-label="go to first step"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="mr-2 text-indigo-200" height="16px" width="16px" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" class=""></path></g></svg><span class="whitespace-nowrap text-sm font-semibold text-white transition-opacity duration-300 opacity-100">Start</span><span class="whitespace-nowrap text-sm font-semibold text-white transition-opacity duration-300 hidden opacity-0">Next</span><span class="whitespace-nowrap text-sm font-semibold text-white transition-opacity duration-300 hidden opacity-0">Finish</span></button>

  {/each}

Please let me know if you can see my errors.

Regards, Ben

[jimafisk]

I don't see the let slideNumber = allContent.filter((content) => content.type === "project1"); code in slides_nav.svelte, is this pushed? Am I looking at the right file?

[jamestagal]

Hi @jimafisk oh yes I hadn't pushed it to the repo. I have now. 😄

[jimafisk]

Hey @jamestagal, it looks like allContent wasn't getting passed originally in layouts/global/html.svelte. I just pushed an update that should fix that error.

[jamestagal]

hi Jim. Oh ok. 😸 thank you.