Error streaming a client UI component from server action

[srigari70]

Description

Create a client side component by marking it with 'use client'

Then call that component in a server action marked by 'use server' in createStreamableUI

An error is thrown: Error: Could not find the module "...components/stocks.tsx#Stock" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

I have tried versions 3.1.31 and 3.1.36 of AI sdk, both fail. Is client component supposed to work from RSC?

Code example

stocks.tsx file:

'use client';
export function Stock({symbol, numOfMonths}: {symbol: string, numOfMonths: number}) {
  
    return (
      <div>
        <div>{symbol}</div>
        <div>{numOfMonths}</div>
      </div>
    );
  }

actions.tsx file:

export async function getAIResponse(history: Message[]) {
  'use server';
  const uiStream = createStreamableUI();
  (async () => {
    const { fullStream } = await streamText({
      model: openai('gpt-4-turbo'),
      system: "You are a friendly assistant",
      messages: history,
      toolChoice: 'auto',
      tools: {
        getStocks: {
          description: "ONLY use this when asked explicitly to asked about stocks.",
          parameters: z.object({
            symbol: z
              .string()
              .describe('The stock symbol to get information for'),
            numOfMonths: z
              .number()
              .describe('The number of months to get historical information for'),
          }),
          execute: async ({symbol,numOfMonths}:{symbol:string,numOfMonths:number}) => {
            uiStream.update(<Stock symbol={symbol} numOfMonths={numOfMonths} />);
            uiStream.done();
            return 'stocks information';
          },
        }
      }
    });
  })();

  return {
    conversation: history,
    display: uiStream.value,
  };
}

Additional context

No response

[hotchpotch]

I am also encountering the same error.

• ai@3.1.31
  • Works fine.
• ai@3.1.32 to 3.1.36
  • Doesn't work.

When trying again, I had to remove .next once, otherwise I got the same error with 3.1.31.

pnpm install; rm -rf .next; pnpm dev

[hotchpotch]

Probably the same problem #1933

[tsoumdoa]

It probably is, having the same issue here too. With the versions mentioned above.

Funny enough, I'm getting the same error even after I rolled back to the previous known working version of ai (3.1.3) and next (14.1.0). I tried removing .next but still no lack...

[jamesaphoenix]

I'm getting the same error, this seems like a wonky bug :D

[MikolajKulesz]

Same here , reverting to ai@3.1.31 getting it work again, thx @hotchpotch

[lgrammel]

#2068

[mxzinke]

@lgrammel I think the issue is not resolved.

Using the latest version ai@3.2.11 with next@14.2.4. (On fresh installed node_modules + removed .next)

When having a client component like...

"use client";

export default function Text({ content }: { content: string }) {
  return (<p>{content}</p>);
}

...and streaming it with either createStreamableValue or createStreamableUI, then I get the following error (on the client using readStreamableValue):

Error: Could not find the module
"/User/dev/test/app/example/test.tsx#default" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

The same, when I use the client component in a parent server component. When using the server component as a parent, the server component first loads and then the error pops up.

Seams like the bundling of the client component is not done the right way. And maybe it is an issue for the next bundler. (Here we are pushing the limits of Next.js ^^)

[mxzinke]

@lgrammel

I noticed when using dynamic import, that it seems to work somehow. But cannot verify it is fixed, since I have also introduced some changes to other parts of my codebase.

[Krumil]

Still have the same problem with 3.4.9