Create components using a plugin

Questions and Answers Strapi Backend
1
System Information
  • 4.3.x:

Hi all,
I’m wondering how create components “programmatically” using a plugin. After googling and searching in this forum seems impossibile.
But… how do the magic like strapi-plugin-seo (@Mcastres ) that add components in a strapi instance?
Maybe it’s necessary to create a components and then create a routine to add them to the UI?
Thanks
Vito

2

Hello Vito :wave:

I’m trying to understand your question. What happens in the SEO plugin is that I created two “static” components and in the server part of the plugin I use the content-type-builder plugin components API to create a component directly which, contains a sub-component :slight_smile:

For the SEO plugin use case, the components are statics. But you can make it dynamic of course depending on what you receive from the front-end for example.

Happy to answer any other questions!

3

Oh, sorry, you right.
I forgot to explain my scenario.

I want to create a plugin with a content-type and two different components.

The content-type is OK, but the components created in the folder /server/components/mycomponents/XX.json are “invisible” in the strapi instance, only the content-type is listed.
And more: if I add a field component-type to the json schema of the content, I obtain an error when strapi tries to start:

[2022-09-13 12:45:38.500] debug: ⛔️ Server wasn't able to start properly.
[2022-09-13 12:45:38.501] error: Cannot read properties of undefined (reading 'attributes')
TypeError: Cannot read properties of undefined (reading 'attributes')
    at Object.getNonVisibleAttributes (/Users/v/strapi/my-project2/node_modules/@strapi/utils/lib/content-types.js:69:11)
    at getNestedFields (/Users/v/strapi/my-project2/node_modules/@strapi/admin/server/services/content-type.js:30:51)

Vito

4

Ok, I read the source code of the seo-plugin, and now is more clear for me.
So, my question could be:
can I use the lifecycle of Strapi to add automatically a specific component to a specific content-type?

Vito

5

@vito80ba I have the same issue.
/server/components/mycomponents/XX.json is “invisible” in the strapi instance.
It only works when I add the component inside: src/components/XX.json.

Did you find a way to solve this issue?

Kind regards,
Seppe

6

I don’t know if something has changed in this year (and what is your scenario), but when I worked for this task I discovered that when you want to create programmatically content-types and components (ex. with a custom plugin) you could create only content-types, than you’ve to set a script in the UI that link content-types with your components.

7

Hi! I’m indeed working on a custom plugin. We created a content type which we want to combine with components. In this case we would like to add multiple color cards (components) in our content-type “styleguide”. Seems like it’s only possible with a custom script indeed… ugh

Schema content-type Styleguide

{
  "kind": "singleType",
  "collectionName": "styleguides",
  "info": {
    "singularName": "styleguide",
    "pluralName": "styleguides",
    "displayName": "styleguide"
  },
  "options": {
    "draftAndPublish": false,
    "comment": ""
  },
  "attributes": {
    "name": {
      "type": "string",
      "required": true,
      "maxLength": 20
    },
    "slogan": {
      "type": "string",
      "required": true,
      "maxLength": 30
    },
    "colors": {
      "type": "component",
      "repeatable": true,
      "component": "shared.color-card-tester",
      "required": false,
      "min": 1,
      "max": 20
    }
  }
}
8

It may be late, after check loadComponents I made some trick in plugins bootstrap file. Hope this will help other people.

import { Strapi } from '@strapi/strapi';
import * as path from "node:path";
import _ from 'lodash';

export default async ({ strapi }: { strapi: Strapi }) => {
  // Tip & Trick: Load components from a different path
  // Backup the original components and components path
  const originalComponentsPath = strapi.dirs.dist.components;
  const originalComponents = _.cloneDeep(strapi.components);

  // Load components from a different path
  strapi.dirs.dist.components = path.resolve(__dirname, './components');
  await strapi.loadComponents();

  // Combine the original components with the new components
  Object.assign(strapi.components, originalComponents);

  // Rollback to the original components path
  strapi.dirs.dist.components = originalComponentsPath;
};
1 Like