Adding a custom media field results in a blank page when editing the menu

[L0UARN]

I followed what's explained in the "Extending" section of the README in order to add the field, and I can get a simple text input to work. If I add a media field though, I get a blank page when trying to edit the menu item, and a JS error in the console (Uncaught TypeError: (destructured parameter).attribute is null)

My ./src/extensions/menus/strapi-server.js looks like this:

"use strict";

module.exports = (plugin) => {
  // Get current `MenuItem` attributes.
  const defaultAttrs = plugin.contentTypes["menu-item"].schema.attributes;

  // Define custom attributes for `MenuItem` the same way they would be defined
  // on any other schema.
  const customAttrs = {
    example_media: {
      type: "media",
      allowedTypes: ["images"],
      multiple: false,
    },
  };

  // Extend the `MenuItem` content type with custom attributes.
  plugin.contentTypes["menu-item"].schema.attributes = {
    ...defaultAttrs,
    ...customAttrs,
  };

  return plugin;
};

And my ./config/plugins.ts like this:

export default ({ env }) => ({
  email: {
    config: {
      provider: "nodemailer",
      providerOptions: {
        host: "localhost",
        port: 25,
        ignoreTLS: true,
      },
      settings: {
        defaultFrom: `${env("DEFAULT_EMAIL")}`,
        defaultReplyTo: `${env("DEFAULT_EMAIL")}`,
        testAddress: "[email protected]",
      },
    },
  },
  "preview-button": {
    config: {
      contentTypes: [
        // {
        //   uid: "api::page.page",
        //   published: {
        //     url: env("FRONT_URL") + "/{slug}",
        //   },
        // },
      ],
    },
  },
  menus: {
    config: {
      layouts: {
        menuItem: {
          link: [
            {
              input: {
                label: "Media",
                name: "example_media",
                type: "media",
              },
              grid: {
                col: 12,
              },
            },
          ],
        },
      },
    },
  },
});

[haidertm]

+1 similar issue facing

[mattmilburn]

Hi @L0UARN @haidertm The latest version 1.6.0 of this plugin has just released. I'm curious if upgrading to that version will resolve your issues. Let me know how it goes for you 👍🏻

[EmilLM]

Hey, @mattmilburn , with the same config as @L0UARN and on v.1.6.0, I get the following error: Uncaught TypeError: Cannot read properties of null (reading 'allowedTypes')

[joelveloso]

+1

[pvtryk]

It still doesn't work. Has anyone found a solution?

[mattmilburn]

@EmilLM @joelveloso @pvtryk So far I have been unable to reproduce this issue. Can anyone give me more details on your implementation? (package.json, plugins.js, etc.)

[joelveloso]

ok this was not working for me but now it is.

NB: This project is in .ts

follow this steps:

1. Create /src/extensions/menus/strapi-server.ts if it does not exist. example:

"use strict";

export default(plugin) => {
  // Get current `MenuItem` attributes.
  const defaultAttrs = plugin.contentTypes["menu-item"].schema.attributes;

  // Define custom attributes for `MenuItem` the same way they would be defined
  // on any other schema.
  const customAttrs = {
    our_media: {
      type: "media",
      allowedTypes: ["images"],
      multiple: false,
    },
  };

  // Extend the `MenuItem` content type with custom attributes.
  plugin.contentTypes["menu-item"].schema.attributes = {
    ...defaultAttrs,
    ...customAttrs,
  };

  return plugin;
};

2. Edit /config/plugins.ts

example:

export default () => ({
menus: {
    config: {
      maxDepth: 3,
      layouts: {
        menuItem: {
          media: [
            {
              input: {
                label: 'Media',
                name: 'our_media',
                type: 'media',
	       allowedTypes: ['images'],
	       multiple: false,
              },
            },
          ],
        },
      },
    },
  },
});

Result: