[MGNLFE-527] Errors appear on browser console on react-sample Created: 21/Jun/23  Updated: 20/Sep/23  Resolved: 24/Jul/23

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

Type: Improvement Priority: Neutral
Reporter: Javier Benito Assignee: Phong Le Quoc
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 3d 3.25h Time Spent: 3d 1.25h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Issue Links:
relation
is related to MGNLFE-571 Change the way to process children of... Open
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-584 Implement Sub-task Completed Phong Le Quoc  
MGNLFE-585 Review Sub-task Completed Rishab Dhar  
MGNLFE-586 PiQA Sub-task Completed Rishab Dhar  
MGNLFE-587 QA Sub-task Closed Oanh Thai Hoang  
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)
Date of First Response:
Epic Link: SPA Editor Backlog
Sprint: DevX 42
Story Points: 2
Team: DeveloperX
Work Started:
Approved:
Yes

 Description   

These errors appear on browser console, while using react-sample:

https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/214/overview?commentId=116804



 Comments   
Comment by Phong Le Quoc [ 11/Jul/23 ]

In Standard.js

<EditableArea content={secondaryAreaContent}>
  {React.createElement(({ content }) => {
    const componentContents = content['@nodes'].map((nodeName) => content[nodeName]);
    return (
      <div className="flex-box">
        {/* eslint-disable-next-line no-shadow */}
        {componentContents.map((content) => (
          <EditableComponent key={content['@id']} content={content} />
        ))}
      </div>
    );
  })}
</EditableArea>

React.createElement makes cms: comment of the component to be added to the browser DOM before cms: comment of the around area is added. Therefore, the script of magnolia-pages-editor-external failed when checking.

if (mgnlElement.getParent().asMgnlElement().isPage()) {
    if (!(mgnlElement instanceof MgnlArea)) {
        throw new ProcessException(ErrorType.EXPECTED_AREA_TAG, comment.getTagName());
    }
    model.addRootArea((MgnlArea) mgnlElement);
}
Comment by Phong Le Quoc [ 11/Jul/23 ]

Solution:

We can fix this by

<EditableArea content={secondaryAreaContent}>
  <div className="flex-box">
    {secondaryAreaContent['@nodes']
      .map((nodeName) => secondaryAreaContent[nodeName])
      .map((content) => (
        <EditableComponent key={content['@id']} content={content} />
      ))}
  </div>
</EditableArea> 
Generated at Mon Feb 12 05:48:18 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.