fix: allow experiences-sdk-react components/hooks to be imported in NextJS server components

[elylucas]

Purpose

Allows importing code direclty from @contentful/experiences-sdk-react from NextJS server components.

Right now we have a workaround to import certain pieces from @contentful/experiences-core as importing them in a NextJS server component will throw an error. This fix allows those components to now be successfully imported from the main sdk.

Ticket: https://contentful.atlassian.net/browse/ALT-1010

Approach

I added use client directives to components that use anything from React that requires client side (useState, useLayoutEffect, etc..). This instructs Next that these are client components, and it will import them as such. This change should have no effect on other frameworks as the 'use client' directive should simply be ignored by them.

To get this to work, I had to change the rollup build to preserve the modules (and not bundle them), and to not exclude the directive.

Test Dev Build

You can test this out locally with a dev build by installing @contentful/experiences-sdk-react@1.8.1-prerelease-20240624T1502-6dcdc44.0

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
experience-builder-test-app	✅ Ready (Inspect)	Visit Preview	Jun 25, 2024 4:23pm

[primeinteger]

Clean work 👏

[Spring3]

Were you able to verify this fix with page router SSR? Does it render on the server correctly? I am a bit worried that adding use client to ExperienceRoot might make it render on client instead

[elylucas]

Were you able to verify this fix with page router SSR? Does it render on the server correctly? I am a bit worried that adding use client to ExperienceRoot might make it render on client instead

Ya, I just ran through and looked at it again. It renders just as it did before. I think pages router simply ignores the 'use client' directive as thats a RSC construct, much like SPA frameworks do.

[Chaoste]

Thanks for sharing this on the call yesterday. I just read a bit more about this kind of pragmas/ directives and your changes sound reasonable to me. Will approve this for sparks :)