[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: |
|
|||||||||||||||||||||||||
| 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)
|
|||||||||||||||||||||||||
| Date of First Response: | ||||||||||||||||||||||||||
| Epic Link: | SPA Editor Backlog | |||||||||||||||||||||||||
| Sprint: | DevX 42 | |||||||||||||||||||||||||
| Story Points: | 2 | |||||||||||||||||||||||||
| Team: | ||||||||||||||||||||||||||
| Work Started: | ||||||||||||||||||||||||||
| Approved: |
Yes
|
|||||||||||||||||||||||||
| Description |
|
These errors appear on browser console, while using react-sample: |
| 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>
|