Uploaded image for project: 'Magnolia Frontend Helpers'
  1. Magnolia Frontend Helpers
  2. MGNLFE-570

Need discovery: any bundler can bundle react component with adding "use client" directive

    XMLWordPrintable

Details

    • Story
    • Resolution: Duplicate
    • Neutral
    • None
    • None
    • None
    • None

    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

       

      •  

      Checklists

        Acceptance criteria

        Attachments

          Activity

            People

              plequoc Phong Le Quoc
              oanh.thai Oanh Thai Hoang
              DeveloperX
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Checklists

                  Task DoD