[MGNLFE-209] React Editor: Green bars not rendering in React 18 (Used by latest Next.js) Created: 06/Jun/22  Updated: 19/Jul/22  Resolved: 04/Jul/22

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: Angular Renderer, React Renderer
Affects Version/s: 1.2.2
Fix Version/s: 1.3.0

Type: Bug Priority: Major
Reporter: Niclas Horstad Assignee: Oanh Thai Hoang
Resolution: Fixed Votes: 1
Labels: None
Σ Remaining Estimate: 0d Remaining Estimate: Not Specified
Σ Time Spent: 7d 6.75h Time Spent: 3d 4.5h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Issue Links:
relation
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLFE-220 Implement Sub-task Completed Oanh Thai Hoang  
MGNLFE-226 Review Sub-task Completed Phong Le Quoc  
MGNLFE-227 PiQA Sub-task Completed Phong Le Quoc  
MGNLFE-228 QA Sub-task Completed Phong Le Quoc  
MGNLFE-231 Fix review 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)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: Support
Sprint: DevX 13
Story Points: 3
Team: DeveloperX

 Description   

Steps to reproduce:

1. Download the Magnolia SPA demo project:
https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse

2. Install latest Magnolia community edition. Start Magnolia.

3. Open the nextjs-ssg-minimal project. Install dependencies (npm install) and run project in development mode (npm run dev).

4. Create root node page called "nextjs-ssg-minimal" with the "Next.js SSG: Basic" template.

Open the page and confirm that green bars are visible for the page. Everything should be working fine at the moment.

5. Stop the Next.js application.

6. Update project dependencies to the latest Next.js values (with React 18):

  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "@magnolia/react-editor": "^1.2.2"
  },
  "devDependencies": {
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6"
  },

7. Delete the "package-lock.json" file and the "node_modules" folder.

8. Re-install dependencies with "npm install".

9. Start the Next.js app: "npm run dev"

In Magnolia, re-open the page. Green edit bars no longer appear.

Notes
This is not related to the issue with Angular-editor 1.2.2.



 Comments   
Comment by Oanh Thai Hoang [ 28/Jun/22 ]

This ticket is still further investigating. Here is the workaround solution now is disable strictmode, see reactStrictMode: false

Root cause: Due to react 18 about strict mode behavior change, React will simulate unmounting and remounting the component in development mode more than one time but production will not be change. So while waiting us to update code to work with strict mode react version 18, let disable strict mode for now

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