Can't nest Storyblok components

[vvaldesc]

I can't use one component within another and I can't find any information in the documentation.

The input parameter of the Main block is supposed to be another blok, I understand that in code this will be a storyblok component, when I nest main with another component it fails and I'm not able to fix it, my only alternative is not to use nested elements right now.

---

Expected Behavior

No error, StoryblokComponent working properly

Current Behavior

Cannot render StoryblokComponent. 'blok' prop is undefined.

components/StoryblokComponent.astro:16:9

import components from "virtual:storyblok-components";
import options from "virtual:storyblok-options";
import camelcase from "camelcase";
import type { SbBlokData } from "../dist/types";
import type { AstroComponentFactory } from "astro/runtime/server/index.js";

export interface Props {
  blok: SbBlokData;
  [prop: string]: unknown;
}

const { blok, ...props } = Astro.props;

if (!blok) {
  throw new Error(
    "Cannot render StoryblokComponent. 'blok' prop is undefined."
  );
}

/**
 * convert blok components to camel case to match vite-plugin-storyblok-components
 */
let key = camelcase(blok.component);

const componentFound: boolean = key in components;

let Component: AstroComponentFactory;

if (!componentFound) {
  if (!options.enableFallbackComponent)
    throw new Error(
      `Component could not be found for blok "${blok.component}"! Is it defined in astro.config.mjs?`
    );
  else {
    Component = components["FallbackComponent"];
  }
} else {
  Component = components[key];
}

Steps to Reproduce

CMS web:

Main is the nestable element.

Main props:

Index.astro:

---
title: "Home"
import { useStoryblokApi } from '@storyblok/astro'
// @ts-ignore
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'
import Layout from '@/layouts/Layout.astro';

const storyblokApi = useStoryblokApi()
const { data } = await storyblokApi.get('cdn/stories/home', {
  version: 'draft',
})

const story = data.story
---
<Layout title='Home'>
  <!--<Slider blok={story.content}/>-->
  <StoryblokComponent blok={story.content} />
  <!-- <Index_main_nav/> -->
</Layout>

Main.astro:

---
// @ts-ignore
import { storyblokEditable } from "@storyblok/astro";
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'


const { blok } = Astro.props
---
<div {...storyblokEditable(blok)} class="container" >
    <StoryblokComponent
        className=""
        blok={blok.content}
    />
</div>

<style>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 0 auto;
    }
</style>

astro config:

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import svelte from "@astrojs/svelte";
import react from "@astrojs/react";
import icon from "astro-icon";
import storyblok from "@storyblok/astro";
import basicSsl from '@vitejs/plugin-basic-ssl'
import metaTags from "astro-meta-tags";

// https://astro.build/config
export default defineConfig({
  redirects: {
    '/home': '/'
  },
  vite: {
    plugins: [basicSsl()],
    server: {
      https: true,
    },
  },
  integrations: [tailwind(), svelte(), react(), icon(), metaTags(),
    storyblok({
      accessToken: XXXXXXXX
      region: "eu",
      bridge: true,
      apiOptions: {}, // storyblok-js-client options
      componentsDir: "src",
      enableFallbackComponent: false,
      customFallbackComponent: "",
      useCustomApi: false,
      components: {
        page: 'components/Storyblok_native/Page',
        feature: 'components/Storyblok_native/Feature',
        grid: 'components/Storyblok_native/Grid',
        teaser: 'components/Storyblok_native/Teaser',
        testblog: 'components/Storyblok_native/Testblog',
        animated_main_div: 'components/Animated_main_div',
        main: 'components/Main',
        slider: 'sections/Slider'
      }
    }),
  ]
});

Package.json:

{
  "name": "tfc-provisional",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev --port 4322",
    "start": "astro dev --port 4322",
    "build": "astro check && astro build",
    "preview": "astro preview --port 4322",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/check": "^0.5.10",
    "@astrojs/react": "^3.3.2",
    "@astrojs/svelte": "^5.4.0",
    "@astrojs/tailwind": "^5.1.0",
    "@storyblok/astro": "^4.0.5",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
    "astro": "^4.7.1",
    "astro-icon": "^1.1.0",
    "astro-meta-tags": "^0.3.0",
    "astro-seo": "^0.8.3",
    "axios": "^1.6.8",
    "eslint-plugin-react": "^7.34.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "svelte": "^4.2.15",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.4.5"
  },
  "devDependencies": {
    "@iconify-json/mdi": "^1.1.66",
    "@vitejs/plugin-basic-ssl": "^1.1.0",
    "prettier": "^3.2.5",
    "prettier-plugin-astro": "^0.13.0"
  }
}

Thank you for your attention

[mhunt]

I'm seeing undefined as well. However, I was able to resolve this by restoring my version of the component in Storyblok's backend, and using the name I setup originally. This could have been an issue with the data not pulling in with the proper field name.

import { storyblokEditable } from '@storyblok/astro'
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'

const { blok } = Astro.props

// if (!blok.services) {
//   throw new Error(
//     "Cannot render StoryblokComponent. 'services' prop is undefined."
//   );
// }

// Log the entire 'blok' to verify its structure
//console.log('Full blok:', JSON.stringify(blok, null, 2));
console.log('Services:', blok.services);

---

<main {...storyblokEditable(blok)}>
  {
    blok.services?.map((blok) => {
      return <StoryblokComponent blok={blok} />
    })
  }
</main>```