Component doesn't render childs if it's set to 'use client'

[anthonyhexium]

Describe the issue you're facing

Hello,

I am having this problem currently.

Whenever I have a component which is in use client mode. It cannot render his childrens.

Here in the demo it will keep saying Component feature doesn't exist. as I defined Grid as a client component.

Any idea on how to solve this ?

Thanks for helping.

Reproduction

https://stackblitz.com/edit/github-h5bwfm?file=components%2FGrid.js

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.5.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 2.00 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.volta/tools/image/node/18.17.1/bin/node
    Yarn: 4.0.0-rc.50 - ~/.volta/tools/image/yarn/4.0.0-rc.50/bin/yarn
    npm: 9.6.7 - ~/.volta/tools/image/node/18.17.1/bin/npm
  Browsers:
    Brave Browser: 117.1.58.127
    Safari: 16.6

Used Package Manager

npm

Error logs (Optional)

Component feature doesn't exist.

Validations

• [X] Follow our Code of Conduct

[arorachakit]

Hey @anthonyhexium ! The reason it doesn't work is because you have your Storyblok Initalization on the server side, and then you're using the component on the client side. In this case, if you're rendering grid - it is being rendered but since it is a client component the Storyblok Components map doesn't have anything as the it is on the server side.

An ideal fix would be to have a component map (for storyblok) on the client side, either by registering the library or by using a new function we recently implemented - setComponents. A quick fix would be to have this in your Grid file - setComponents({ feature: Feature, });

You need to import setComponents from the library itself, I see you're using an older version - you just need to update your library to the latest version to make it work.

cc - @fgiuliani

[arorachakit]

Good to know @b-derouet ! I will close the issue then :)