Hi @rugged orbit. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#.
hollow geyserBOT
The error message you're seeing is related to the use of useSearchParams() in your StreamingStatsChart function. In Next.js, useSearchParams() is a hook that allows you to access the query parameters of the current URL. However, it requires a Suspense boundary to handle the loading state while the search parameters are being retrieved.
To fix this issue, you need to wrap your component that uses useSearchParams() in a Suspense component. The Suspense component allows you to specify some fallback content to display while the component is loading. Here's an example of how you can do this:
import { Suspense } from 'react';
export default function Page() {
return (
<Suspense fallback={<div>Loading...</div>}>
<StreamingStatsChart />
</Suspense>
);
}
In this example, "Loading..." will be displayed until StreamingStatsChart has finished loading. Once it has, the StreamingStatsChart will be displayed.
For more information, you can refer to the Next.js documentation on useSearchParams() (https://nextjs.org/docs/app/api-reference/functions/use-search-params#version-history) and the React documentation on Suspense (https://reactjs.org/docs/concurrent-mode-suspense.html).
Please note that if you're not exporting a component but just using it for a value, you should create a secondary component that uses it, or provide a loading.tsx file alongside your page.jsx, which will automatically wrap the exported page with suspense and use the contents of the loading file as the fallback (source (https://github.com/vercel/next.js/issues/67398)).