[Custom Views] Actions in Cards, **object type not working.** Only String and Number. (Internat React Error from Amazon)

0

Hello, the situations is:

In our custom view: we have the schema that appear at left side panel (at https://leads-eng.my.connect.aws/views/<viewId>)

Enter image description here

so, we want to add Action buttons with our own action-data and label (following the schema)

Enter image description here

something equivalent to that schema will be

interface Card {
  Summary: ISummary;
  Detail?: IDetails
}

interface ISummary {
  Id: string;
  Heading: string;
  Icon?: string;
  Status?: string;
  Description?: string;
}

interface IDetails {
  Section: string | unknown[];
  Heading?: string | number;
  Description?: string | number;
  Actions?: string[] | number[] | IActionItem[]; // ← here
  Action?: string;
}

interface IActionItem {
  Label: string | number;
  Action?: string | number;
}

When we tried with ActionItem objects, it went to blank screen, and this error appears

Actions: [
      { Label: "Review", Action: `${leadId}` },
      { Label: "Back", Action: `back-action` }
]

Enter image description here

rb_dev
asked 3 months ago104 views
1 Answer
-1

Hi,

I see that you have custom view implemented for your use case and you are getting Minified React error while adding Action buttons with your own action-data and custom label.

As mentioned in the linked react documentation[1], it recommends to have first build your react application locally to debug and track the additional debug information to mitigate this error. If you are not encountering this error on build however, encountering on production then, to investigate this issue you might need to create a support case with premium support[2] with the further details of your react project.

Kindly note that this error could be caused due to many reasons. This issue might happen when rendering is not happening correctly. To further investigate kindly open a support support case with the project folder redacting confidential information along with HAR capture and the debug console logs indicating the issue and we can further guide you better in this.

[1] https://react.dev/errors/31?invariant=31&args%5B%5D=object%20with%20keys%20%7BLabel%2C%20Action%7D

[2] https://docs.aws.amazon.com/awssupport/latest/user/case-management.html

AWS
SUPPORT ENGINEER
answered 3 months ago
profile picture
EXPERT
reviewed 2 months ago
  • Thank you for the response, but this isn't an issue with a custom react application. This is an issue with a cards view in a step-by-step guide. Amazon Connect is what is throwing the minified react error when passing an object into actions to support custom Labels. The schema provided by Amazon Connect seems to say this should be supported. Is that not the case?

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions