Hello,

I'm using a Next 14.2.2 version and having issues with server actions rendering not previously imported client components.

So, I have a server action:

export async function renderSomeServerComponent(foo: string): Promise<ReactElement> {
  return <ServerComponent foo={foo} />;
}

ServerComponent imports and renders a client Component:

import Component from '/path/to/Component';

export default function ServerComponent({ foo }: { foo: string }) {
  return (
    <>
      <Component />
      {foo}
    </>
  );
}

This server action is triggered on user interaction and rendered when resolved:

'use client';

import { ReactElement, useRef, useState } from 'react';

import { renderSomeServerComponent } from '@/actions/server-action';

const ServerActionComponentTrigger = ({ foo }: Readonly<{ foo: string }>) => {
  const [isPanelVisible, setIsPanelVisible] = useState(false);
  const actionResult = useRef<ReactElement | null>(null);

  async function togglePanelVisibility() {
    if (!actionResult.current) {
      actionResult.current = await renderSomeServerComponent(foo);
    }
    setIsPanelVisible((prevState) => !prevState);
  }

  return (
    <>
      {!isPanelVisible && (
        <button
          className={styles.tournamentsPanelTrigger}
          onClick={() => togglePanelVisibility()}
          data-testid="aside-open-button"
        >
          'trigger'
        </button>
      )}

      {isPanelVisible && (
        <aside>
          <button onClick={() => togglePanelVisibility()} data-testid="aside-close-button">
            <IconClose />
          </button>
          {actionResult.current}
        </aside>
      )}
    </>
  );
};

export default ServerActionComponentTrigger;

Idea here is to have server action return rendered react server component to utilize caching of a large response from the api that is needed in this situation. The error occurs only when the client component is not previously imported and bundled. Ideas?