Anyone know why I am getting this error?
Error: (0 , swr__WEBPACK_IMPORTED_MODULE_1__.default) is not a function
I'm importing like this inside a server component
import useSWR from 'swr';
SWR Version: ^2.2.4
Nextjs Version: 13.5.6
#SWR Error
near panther
keen voidBOT
Hi @near panther. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, it seems like you're trying to use the useSWR hook from the SWR library in a server component of a Next.js application. However, the SWR library is designed for client-side data fetching, not server-side. This could be the reason why you're encountering the error.
Here's an example of how to use useSWR in a client-side component:
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Profile() {
const { data, error } = useSWR('/api/profile-data', fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>
return (
<div>
<h1>{data.name}</h1>
<p>{data.bio}</p>
</div>
)
}
(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side))
For server-side data fetching in Next.js, you might want to use getServerSideProps or getStaticProps instead. If you're using the latest version of Next.js with React 18 and server components, you can use fetch directly in your server component:
export default async function Page() {
const res = await fetch('<https://api.example.com/...'>);
const data = res.json();
return '...';
}
(Source: Next.js Blog (https://nextjs.org/blog/next-13-4))