Define client boundary for vendor component library via config

[stkao05]

Goals

Provide a way to specify which vendor component packages are client components. This would allow server components to import vendor client components more easily.

Non-Goals

No response

Background

Currently, when you import a client component from a vendor package into your server component, like this:

import * as Popover from '@radix-ui/react-popover';

async function page() {
    return <Popover>...</<Popover>
}

you will encounter the error:

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.

This is because not all vendor component libraries have 'use client' explicitly defined. One solution is to draw the client boundary

import App from './app'; // client component

async function page() {
    return <App>...</App>
}

or to create a file that exports the components with 'use client' directive.

// lib/popover.ts

"use client";
export Popover from "@radix-ui/react-popover";

However, both solutions are far from ideal as they require creating additional files or client separation that may not be semantically related to your application.

Proposal

A new option to next.config.js: clientPackages that defines client boundary for vendor component

const nextConfig = {
  clientPackages: ['@radix-ui/react-popover'],
}