[MGNLFE-570] Need discovery: any bundler can bundle react component with adding "use client" directive Created: 05/Jul/23  Updated: 22/Sep/23  Resolved: 22/Sep/23

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

Type: Story Priority: Neutral
Reporter: Oanh Thai Hoang Assignee: Phong Le Quoc
Resolution: Duplicate Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File structure.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Epic Link: React RSC
Team: DeveloperX

 Description   

After POC: Based on react essential from next js: https://nextjs.org/docs/getting-started/react-essentials#library-authors

It's worth noting some bundlers might strip out "use client" directives. You can find an example of how to configure esbuild to include the "use client" directive in the React Wrap Balancer and Vercel Analytics repositories.

 

Currently after trying with webpack and nx server with js. Next js app still does not recognized client component because missing "use client". See more reference comment in https://jira.magnolia-cms.com/browse/MGNLFE-466?focusedId=363782&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-363782

 

Workaround solution: Moving to use typescript and using bundler with https://tsup.egoist.dev and https://esbuild.github.io/. See https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/220/diff#samples/next-js-13-with-react-editor-new/packages/react-wrap-client-component-typescript/package.json

 

So AC of this ticket is figure out the bundler can bundle JS can work on Next 13 and React

 

  •  


 Comments   
Comment by Oanh Thai Hoang [ 22/Sep/23 ]

After discussing with plequoc . I think this ticket is done with his output in PR(https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/244/overview)

 

 

In summary, all of use client component such as EditableComment,.. We must seperate them to another js project. Use tsup bundler to bundle all of them. Then put "use client" on top of js lib.

Comment by Oanh Thai Hoang [ 22/Sep/23 ]

Close as duplicate with https://jira.magnolia-cms.com/browse/MGNLFE-635

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