Next.js Discord

Discord Forum

in next 15, returning response of a fetch call from a server action to a client component errors.

Unanswered
Western paper wasp posted this in #help-forum
Open in Discord
Western paper waspOP
after upgrading next 13 to 15, I encountered an issue, the streamed text doesn't get fully displayed.
I call a server action in useMutation (ReactQuery). in my server action, I used to return the whole response and it used to work correctly, but since I upgraded nextjs, it gave me this error:
[ Server ] Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
{}
I return an object:
   
const response = await fetch(
      `${process.env.NEXT_PUBLIC_SUPABASE_URL!}/functions/v1/send-message`,
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${accessToken ?? ''}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          content,
        }),
      },
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    return {
      body: response.body,
      status: response.status,
      headers: {
        MSG: response.headers.get('MSG'),
      },
    };
  } catch (error) {
    console.error('sendMessage error: ', error);
    throw error;
  }
};

1 Reply

Western paper waspOP
the onSuccess function then calls the function below which is in a client component:
const handleSendMessageSuccess = async (res: any) => {
    try {
      if (!!!res.body) {
        setIsTyping(false);
        throw new Error('No response body');
      }
      const reader = res.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';

      setReply('');
      setIsTyping(true);

      addMessage({
        role: 'assistant',
        content: '',
      });

      while (true) {
        const { done, value } = await reader.read();

        if (done) {
          setIsTyping(false);
          editMessage('content', reply, messages.length - 1);
          setReply('');
          break;
        }

        buffer += decoder.decode(value, { stream: true });
        let boundary = buffer.indexOf('\n');

        while (boundary !== -1) {
          const chunkText = buffer.slice(0, boundary).trim();
          buffer = buffer.slice(boundary + 1);

          if (chunkText) {
            try {
              const parsedChunk = JSON.parse(chunkText);
              const content = handleBotContents(parsedChunk, bot?.company);

              if (content) {
                await typing(content, 30, (v) => setReply((prev) => prev + v));
              }
            } catch (error) {
              console.error('Failed to parse chunk: ', chunkText, error);
            }
          }
          boundary = buffer.indexOf('\n');
        }
      }
    } catch (err) {
      console.error('chat send-message success error: ', err);
      setIsTyping(false);
    }
  };

As I mentioned before, it used to work correctly in next 13. but what should I do now?