Issues with react server components / NextJS 13.x

[blitzbohne]

Description

With the raising use of react server components its hard to use primer on nextjs projects.
The components seem to have heavy dependencies on client components which may not always be neccessary.

The major issue however is that the components should include 'use client' or 'use server' depending on wether they can work on server or not. This would allow to not have to mark a whole page with 'use client' just to use static primer components.

Steps to reproduce

1. Create new nextjs 13.4 project
2. Create a server component in app router (regular page)
3. Import any primer component
4. Fails as primer is not marking use client / use server

Version

35.25.1

Browser

Chrome, Safari, Firefox, Edge, iOS Safari

[mauricioklein]

Facing the same problem

Even top level components (e.g. Box) aren't suitable to SSR because they depend on React Hooks internally

[lesliecdubs]

Thanks for letting us know! Compatibility of Primer React with React server components isn't currently on our roadmap but feel free to continue notifying us of use cases in the meantime.

If folks have any libraries or references to share for implementing server components in a design system, we'd love to see those!

[blitzbohne]

@lesliecdubs Sadly you guys don't allow outer contributions right now otherwise I'd have take the steps to modify ;-)

Its actually pretty simple. As long as the component is not using any client side hooks (like useEffect) they don't need to be marked and can be used out-of-the-box as server components.

However as soon as client code is used they must be marked as 'use client'. The one and important thing to make sure of is that a client component may not import a server-component but vice versa is allowed. Doing so would automatically allow to use primer easily in new react RSC projects without any modifications at all.

thanks

[lesliecdubs]

@blitzbohne thanks for your response. RSC support isn't on our immediate roadmap, but after discussing with the maintainers we would be open to accepting a PR for this change. I went ahead and assigned you on this issue, but feel free to unassign and/or close if you decide not to pick it up.

Sadly you guys don't allow outer contributions right now otherwise I'd have take the steps to modify ;-)

Primer does accept contributions, so if you'd like to make this change we would welcome a PR! There's more info on this topic in the PRC contribution guidance. Are you able to share where you ran into instruction or friction on this point and we'll take a look at updating?

[blitzbohne]

@lesliecdubs Thank you very much. I'll try to do it in the next 1-2 weeks

[renbaoshuo]

Is there any further progress on this issue? This issue looks like there has been no activity for a long time.

[lesliecdubs]

@blitzbohne are you still planning to work on this?

[cihad]

I found a solution:

In Nextjs 14:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: function (config, options) {
    config.module.rules.push({
      test: [/node_modules[\\/]@primer[\\/]react[\\/.].*\.js$/], /// replace here make match your package
      loader: require.resolve("./loaders/use-client-loader.js"),
    });
    return config;
  },
}

module.exports = nextConfig

loaders/use-client-loader.js

module.exports = function (source) {
  return `"use client";\n` + source;
};

see: https://stackoverflow.com/a/76436701/7663430

Also for extra recommendation add this next.config.js:

  transpilePackages: ['@primer/react'],
  experimental: {
    optimizePackageImports: ["@primer/react"],
  },

[joshblack]

Hi all! Just wanted to leave a comment now that: #4128 is merged and available in v36.6.0 of @primer/react that components should be directly usable without requiring an intermediate 'use client' directive at the page level (or for components that call these components from Primer)

Going to close this out as I believe the original issue is fixed but feel free to leave a comment and I can re-open if that's not the case!