[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: |
|
|||||||||||||||||||||||||
| Sub-Tasks: |
|
|||||||||||||||||||||||||
| 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: | ||||||||||||||||||||||||||
| 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. 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:
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 |