Got component nesting removed? I can't add a component field if the component has a component as a field already

[dmuellner]

System Information

• Strapi Version: 4.1.3
• Operating System: Linux
• Database: MySQL
• Node Version: 14.18.1
• NPM Version: 6.14.15

---

I tried to use the FoodAdvisor Demo as a best practise blueprint but quite quickly got stuck.
Within the demo there are components nested like this:

On my strapi v4.1.3 installation I cannot select component as field when the component hast already another component as a field…what am i missing?
Is the demo an older version where this was still supported?

[dmuellner]

I was able to achieve nested components by editing the footer.json manually. It seems although as it is not possible via the UI?

[terchris]

any more doc on this. I’m upgrading from v3.x to v4.x by typing in all definitions manually. In my v3.x I have a component that uses components.
V3.x looks like this

V4.x looks like this

[dmuellner]

I am afraid there is no “UI-way of achieving it” so far.
It is super simple inside the code though:

footer.json:

{
  "collectionName": "components_global_footers",
  "info": {
    "displayName": "footer",
    "icon": "align-right"
  },
  "options": {},
  "attributes": {
    "footerColumns": {
      "type": "component",
      "repeatable": true,
      "component": "shared.footer-columns"
    },
    "socialNetworks": {
      "type": "component",
      "repeatable": true,
      "component": "shared.social-networks"
    },
    "button": {
      "type": "component",
      "repeatable": false,
      "component": "shared.button"
    },
    "label": {
      "type": "string"
    }
  }
}

shared/footer-columns.json:

{
  "collectionName": "components_shared_footer_columns",
  "info": {
    "displayName": "footerColumns",
    "icon": "align-justify"
  },
  "options": {},
  "attributes": {
    "title": {
      "type": "string",
      "required": true
    },
    "links": {
      "type": "component",
      "repeatable": true,
      "component": "shared.link"
    }
  }
}

Afterwards if you want to deeply populate the nested components you need to use the plugin: strapi-plugin-populate-deep - npm

[christofvanhove]

Is this bug? Or what is causing this? When I create components from scratch, it doesn’t seem to be a problem.

[abenz1267]

Any info on this? This seems to be a bug, as i can add a component field on 1 out 3 components. If this wasn’t possible in general i wouldn’t be able to for the one component …or when creating a new one.

[Simon_Mauracher]

try scrolling

[Himanshu_beem]

@gfargo : Nesting three or more levels in a component and when used inside a dynamic zone, creates error:

error: delete from components_layouts_blocks_components where (entity_id = 3 and component_id not in (3) and field = ‘padding’) - database is locked
SqliteError: delete from components_layouts_blocks_components where (entity_id = 3 and component_id not in (3) and field = ‘padding’) - database is locked

What could be the possible solution/workaround to get past this as we really needed to implement multi layered components for our use case ?!

[johnnysedh3lllo]

thanks for sharing this, this was super helpful.

[dmuellner]

I just talked to one of the strapi engineers if my proposed solution is really feasable and he mentioned some issues with it you need to be aware of:

• the deeply nested data will get harder and harder ot extract until you will reach a certain limit of strapi, that you cannot go any deeper
• you might run into circular dependency problems where component A demands something from B and B something from A which will result in errors.

Be aware of these problems. The engineer rather adviced me to rethink the components and create the specific ones you need without the need of nesting multiple layers deep.

Furhtermore he mentioned that it might(!) get better in V5