[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: |
|
||||||||||||||||||||||||||||||
| 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
|
||||||||||||||||||||||||||||||
| Date of First Response: | |||||||||||||||||||||||||||||||
| Epic Link: | Support | ||||||||||||||||||||||||||||||
| Sprint: | DevX 13 | ||||||||||||||||||||||||||||||
| Story Points: | 3 | ||||||||||||||||||||||||||||||
| Team: | |||||||||||||||||||||||||||||||
| Description |
|
Steps to reproduce: 1. Download the Magnolia SPA demo project: 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": { 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 |
| 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 |