Next.js Discord

Discord Forum

Async/await is not yet supported in Client Components

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
I'm so confused with the new next.js version. I have the code below that was working on old version of next.js.
Now that I've upgraded I'm getting in a lot of errors.
One of ths things that I can't get right is the usage of 'use client'. In this example, if I don't use that, I get the error "You're importing a component that needs useState". So, naturally, I use the line 'use client'.
But then I get errors when I click the button on the page and it seems related with 'use client'.

Can someone help me understant what am I doing wrong? And I know that I can (and should???) put triggerEndpoint in a separate file right? If so, do I need to add something to the code?

Currently, as is, I get this error when I click the button:

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

16 Replies

American black bearOP
'use client'

import React, { useState } from 'react';
import { Button } from "@nextui-org/react";

export default async function RestTest() {
  const [messages, setMessages] = useState([]);

  const formatTimestamp = (timestamp: string | number | Date) => {
    const date = new Date(timestamp);
    const formattedDate = date.toLocaleDateString('pt-PT', { day: '2-digit', month: '2-digit', year: 'numeric' });
    const formattedTime = date.toLocaleTimeString('pt-PT', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
    return `${formattedDate} ${formattedTime}`;
  };

  const triggerEndpoint = async (endpoint, customMessage) => {
    const message = {
      content: customMessage,
      timestamp: new Date().getTime() // Use the current timestamp
    };

    setMessages((oldMessages) => [...oldMessages, message]);

    try {
      const res = await fetch(`http://<ip>:<port>/myapi${endpoint}`);
      const data = await res.json();

      const responseMessage = {
        content: data.message,
        timestamp: new Date().getTime() // Use the current timestamp
      };

      setMessages((oldMessages) => [...oldMessages, responseMessage]);
    } catch (error) {
      console.error(error);

      if (error.message === 'Failed to fetch' || error.code === 'ECONNREFUSED') {
        const errorMessage = {
          content: 'REST API seems to be not available',
          timestamp: new Date().getTime(), // Use the current timestamp
        };

        setMessages((oldMessages) => [...oldMessages, errorMessage]);
      }
    }
  };

  return (
    // the return code is below
  );
};
<>
  <div className="flex flex-wrap gap-45 items-center">
    <Button color="success" size="lg" onClick={() => triggerEndpoint('/action', 'Start of action...', setMessages)}>ACTION</Button>
    <ul>
      {messages
        .sort((a, b) => b.timestamp - a.timestamp) // Sort in descending order of timestamp
        .map((message, index) => (
          <li
            key={index}
            style={{
              color: message.content.startsWith('Start') ? 'green' : 'red',
              fontWeight: 'bold',
              fontSize: '12px',
              fontFamily: 'Courier New'
            }}
          >
            {`${formatTimestamp(message.timestamp)} - ${message.content}`}
          </li>
        ))}
    </ul>
  </div>
</>
European sprat
export default async function RestTest() {

needs to be come

export default function RestTest() {
American black bearOP
that worked
but when I go to the page in the first place I get this error in the console: 

app-index.js:31 Warning: Extra attributes from the server: class
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)
is this completely unrelated?
European sprat
i believe that's unrelated
American black bearOP
something that I should be worried about? I can't understand where the error is from that (only) log
but maybe it's because I'm not very experienced with this
European sprat
delete .next/ if it exists and restart dev server and try again with a hard refresh
or try incognito. when i googled it i saw some mention about a browser extension so maybe something there
i don't know
American black bearOP
i see, it can be many things
European sprat
i just did a search in here for "attributes from the server: class" and i see others talking about it, maybe someone has an answer in those other threads?
American black bearOP
Also, I moved the triggerEndpoint to another file and imported it and everything is working fine. From what I understand, I always have to use 'use client' when my code is client side right?