Localization in nested symbols breaks for some

Bugs
1

Problem

Hi, we have a symbol with ID 3a9945af170b4116887767cad263a9ce that is used in multiple pages. Symbol contains another nested symbol and it breaks when we enabled localization for it. The weird part is that it only breaks for some of the pages. E.g.

  1. PageID: f67e6a60519c41fca8680340b848d83c (Broken)
    image
    image2080×606 30.4 KB
  2. PageID: f7358724d73b4c509467102afeb9fc11 (Working)
    image
    image2074×494 26.5 KB

Error:

Objects are not valid as a React child (found: object with keys {@type, Default, sv, de, no, da}). If you meant to render a collection of children, use an array instead.

Which as far as I understand suggest that the locale was not passed to symbol.

It works fine in preview mode

What I’ve tried

  • Copying working symbol entry
    When I copy and paste the symbol to site where it works it works, when I paste it to the page when it doesn’t work it still doesn’t.
  • Inherit state setting
    Set both for nested symbol and outer one and it doesn’t change anything.
  • Detaching symbol
    It works, but we want to avoid it at any cost, because symbol is used everywhere

Context

The same exact issue appears in multiple nested symbols across the whole application after enabling localization. The same issue applies for nested symbols inside custom code components.

I hope that we will be able to apply the solution for this issue to all other cases

2

Hello @jjablonski,

Could you please share the details of your current tech stack and @builder/react version? Additionally, would it be possible for you to share the code for page model integration?

Thank you.