How to add several custom fields (buttons) in strapi

I’m trying to add another button to the existing one in strapi, but it throws an error (it just doesn’t load entities into the content-manager). What could be causing the problem?
If you give the buttons the same name, pluginid and plugin, then the second button will simply repeat the actions of the first

plugins/custom-button/index.ts

register({ strapi }) {
    strapi.customFields.register({
      name: "custom-button-source",
      plugin: "custom-button",
      type: "string",
    },
    {
      name: "custom-button-article",
      plugin: "custom-button",
      type: "string"
    });
  }

src/plugins/custom-button/admin/src/pluginId.js

import pluginPkg from '../../package.json';

const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');

export default pluginId;

custom-plugin part in package.json

"name": "custom-button",
  "version": "0.0.0",
  "description": "This is the description of the plugin.",
  "strapi": {
    "name": "custom-button",
    "description": "Description of Custom Button plugin",
    "kind": "plugin",
    "displayName": "Custom Button"

getTrad.js

import pluginId from '../pluginId';

const getTrad = (id) => `${pluginId}.${id}`;

export default getTrad;

plugins/custom-button/admin/src/index.js

import { prefixPluginTranslations } from "@strapi/helper-plugin";
import pluginPkg from "../../package.json";
import pluginId from "./pluginId";
import Initializer from "./components/Initializer";
import PluginIcon from "./components/PluginIcon";

const name = pluginPkg.strapi.name;

const getTrad = (id) => `${pluginId}.${id}`;

export default {
  register(app) {
    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      name: "custom-button-source",
      icon: PluginIcon,
      isReady: true,
      isRequired: false,
      translations: {},
    });

    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      name: "custom-button-article",
      icon: PluginIcon,
      isReady: true,
      isRequired: false,
      translations: {},
    });

    app.customFields.register({
      name: "custom-button-source",
      pluginId: pluginId,
      type: "string",
      intlLabel: {
        id: getTrad("custom-button.label"),
        defaultMessage: "Variants",
      },
      intlDescription: {
        id: getTrad("custom-button.description"),
        defaultMessage: "Variants (Cartesian product)",
      },
      icon: PluginIcon,
      components: {
        Input: async () =>
          import(
            /* webpackChunkName: "input-component" */ "./components/CustomSourceButton"
          ),
      },
      options: {},
    });

    app.customFields.register({
      name: "custom-button-article",
      pluginId: pluginId,
      type: "string",
      intlLabel: {
        id: getTrad("custom-button.label"),
        defaultMessage: "Articles",
      },
      intlDescription: {
        id: getTrad("custom-button.description"),
        defaultMessage: "Articles (Cartesian product)",
      },
      icon: PluginIcon,
      components: {
        Input: async () =>
          import(
            /* webpackChunkName: "input-component" */ "./components/CustomArticleButton"
          ),
      },
      options: {},
    });
  },


  bootstrap(app) {},
  async registerTrads({ locales }) {
    const importedTrads = await Promise.all(
      locales.map((locale) => {
        return import(`./translations/${locale}.json`)
          .then(({ default: data }) => {
            return {
              data: prefixPluginTranslations(data, pluginId),
              locale,
            };
          })
          .catch(() => {
            return {
              data: {},
              locale,
            };
          });
      })
    );

    return Promise.resolve(importedTrads);
  },
};

You need to sign in to view this answers