[MGNLFE-549] SPA projects miss "key" property on SaaS - causing warnings Created: 22/Jun/23  Updated: 23/Oct/23  Resolved: 11/Jul/23

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: 1.3.3
Fix Version/s: 1.4

Type: Bug Priority: Neutral
Reporter: Christopher Zimmermann Assignee: Phong Le Quoc
Resolution: Done Votes: 0
Labels: None
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 2d 1h Time Spent: 2d 1h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: PNG File image-2023-07-11-10-34-19-133.png     PNG File image-2023-07-11-10-37-11-592.png    
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-552 Implement Sub-task Completed Phong Le Quoc  
MGNLFE-553 Review Sub-task Completed Robert Šiška  
MGNLFE-554 PiQA Sub-task Completed Robert Šiška  
MGNLFE-555 QA Sub-task Closed Christopher Zimmermann  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Epic Link: SPA Maintenance
Sprint: DevX 40, DevX 41
Story Points: 5
Team: DeveloperX
Work Started:

 Description   

All React-based projects on SaaS have red warnings in the browser console and will have reduced performance because the child nodes of “EditableArea” do not have unique “key” properties which the React framework mandates.

Warning message is:

react.development.js:315 Warning: Each child in a list should have a unique "key" prop.

You will need to test on SaaS instance.
 
Technical notes:
The reason appears to be that in the Magnolia react-editor iibrary, the EditableArea code usesr the @id property on the delivery endpoint response for that component to set the “key” value.

See: https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/src/component/EditableArea/EditableArea.js#89

However - the Norsu Delivery Endpoint does not supply @id properties for the components as the JCR one does, therefore the react-editor does not set the key property.

Some ideas:

  • Change react-editor to use @name property instead of @id?

 

Please update React, Vue and Angular libraries in order to be consistant. (You will need to test on SaaS instance.)

Norsu response example:

 

{{}}

{
  "@path": "/react-minimal",
  "@id": "7e41884d-162f-42b6-91ce-82a03a5ea96e",
  "@name": "react-minimal",
  "@nodeType": "mgnl:page",
  "mgnl:template": "react-minimal-lm:pages/basic",
  "name": "react-minimal",
  "title": "Let's create something amazing",
  "mgnl:lastModified": 1687194843,
  "extras": {
    "@name": "extras",
    "@path": "/react-minimal/extras",
    "@nodeType": "mgnl:area",

    "components[0]": {
      "@name": "components[0]",
      "@path": "/react-minimal/extras/components[0]",
      "@nodeType": "mgnl:component",
      "mgnl:template": "spa-lm:components/headline",
      "text": "In this issue",
      "@nodes": []
    }, 

 

Testing on 2023-07-11

Without fix, getting this error:

With the fix, the warning is different:



 Comments   
Comment by Christopher Zimmermann [ 11/Jul/23 ]

Works

Generated at Mon Feb 12 05:48:31 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.