CODEWITHSUNDEEP
reactjsnext.jsfetch-apinext.js13swr
Kusumoon
Kusumoon

Reputation: 119

Attempted import error: 'swr' does not contain a default export (imported as 'useSWR'). - nextjs 13

I make project using nextjs 13.4.7 and already install swr in 3 PC but I got the same error:

Attempted import error: 'swr' does not contain a default export (imported as 'useSWR').
error TypeError: (0 , swr__WEBPACK_IMPORTED_MODULE_2__.default) is not a function

my swr version is "swr": "^2.2.0"

I use swr like this:

import useSWR from 'swr';

function Todos() {

  // Define the fetcher function to fetch data from the API
  const fetcher = (url) => fetch(url).then((res) => res.json());

  // Use SWR to fetch data from the API
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/todos/', fetcher);

  if (error) return <div>Failed to load todos</div>;
  if (!data) return <div>Loading todos...</div>;

  return (
    <div>
      <h1>Todos</h1>
      {data.map((todo) => (
        <div key={todo.id}>
          <h3>{todo.title}</h3>
          <p>{todo.completed ? 'Completed' : 'Not completed'}</p>
        </div>
      ))}
    </div>
  );
}

export default Todos;

How to fix it?

Upvotes: 11

Views: 11380

Answers (2)

skmishra
skmishra

Reputation: 31

Try using 'use client' at the top of the page. I am also getting a similar error when trying to use the hook.

(0, swr__WEBPACK_IMPORTED_MODULE_4__.default) is not a function

I found that I forget to use 'use client'. I put 'use client' at the top then the error was resolved.

Upvotes: 3

Andre Marques
Andre Marques

Reputation: 269

I think you forget to type "use client" at the top of code

Upvotes: 26

Related Questions