[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: |
|
| 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: |
| 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 |