Hello! I'm struggling with the cacheComponents flag.

Previously, my project used unstable_cache, and now I'm trying to migrate to cacheComponents. However, after enabling it, my production build starts returning a 500 "Internal Server Error". I've already verified that the issue is specifically caused by cacheComponents — the server itself is working correctly.

The logs contain the following error:

[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.]

And another one:

digest: 'DYNAMIC_SERVER_USAGE'

Wrapping components in Suspense does not help. The error happens in production only — locally both npm run dev and npm run build && npm run start work correctly.

Example page.tsx:

import { Suspense } from 'react';

import { Skeleton } from '@components/Skeleton';
import { Wrap } from '@components/Wrap';

import styles from './page.module.scss';

interface IPageProps {
    params: Promise<{
        os: OperatingSystem,
    }>,
};

const Page: React.FC<IPageProps> = (props) => (
    <main className={styles.main}>
        <Suspense fallback={<Skeleton />}>
            <Wrap {...props} />
        </Suspense>
    </main>
);

export default Page;

Wrap component:

import { headers } from 'next/headers';
import { X_REQUEST_ID } from '@constants';
import { Component } from './Component';

interface IWrapProps {
    params: Promise<{
        os: PageOS,
    }>,
};

export const Wrap: React.FC<IWrapProps> = async (props) => {
    const requestId = (await headers()).get(X_REQUEST_ID);
    const params = await props.params;

    return (
        <Component
            params={params}
            requestId={requestId}
        />
    );
};