Next.js RSC import error: 'swr' does not contain a default export (imported as 'useSWR')

[kusumakan]

Description / Observed Behavior

When import swr in nextjs react server component. It will throw a confusing error 'swr' does not contain a default export (imported as 'useSWR')

import useSWR from "swr";
export default function Home() {
  const { isLoading } = useSWR("/api")
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return <div>Loaded</div>;
}

[azu]

• Reproduce: https://codesandbox.io/p/sandbox/practical-hooks-hcsgzw?file=%2Fapp%2Fpage.tsx%3A9%2C1
• Next.js: 13.4.4
• SWR: 2.2.0

The reason is that it was added in v2.2.0 with the react-server bundle.

• Add react-server bundle for core and infinite #2664

Next.js support React Server Component and use react-sesrver bundle in App Router.
But, SWR's react-server bundle does not has default export. So It show an error message that is difficult to understand.

error TypeError: (0 , swr__WEBPACK_IMPORTED_MODULE_2__.default) is not a function

This is probably a intentional and can be avoided by adding "use client".

+ "use client";
import useSWR from "swr";
export default function Home() {
  const { isLoading } = useSWR("https://httpstat.us/200");
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return <div>Loaded</div>;
}

However, the error messages are confusing and need to be improved.

[promer94]

@azu Thanks for your reproduction and explanation. ❤️

This is probably a intentional and can be avoided by adding "use client".

• Right. It is intentional. React actually does the same thing.

However, the error messages are confusing and need to be improved.

• I strongly agree with you. The current implementation will throw a early static error which is better than runtime error. But the message itself is confusing for developer who are not familiar with RSC and react-server.

How to use swr in Next.js appDir

• In Next.js App Router, all components are React Server Components (RSC) by default. You could only import the key serialization APIs from SWR in RSC.

import { unstable_serialize } from 'swr' // ✅ works 
import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite' // ✅ works 

import useSWR from 'swr' // ❌ it won't works

• You need to mark your components with 'use client' directive so that SWR could work properly.

'use client'
import useSWR from 'swr' // works ✅

• If you need to use SWRConfig to do some global setup in your layout or page components, but don't want to make layout or page a client component. You could create a separate provider component

// my-provider.tsx
'use client';
import { SWRConfig } from 'swr'
export const MyProvider = ({ children }) => {
  return <SWRConfig>{children}</SWRConfig>
};

// layout.tsx
import { MyProvider } from './my-provider'
export default function Layout({ children }) {
  return <MyProvider>{children}</MyProvider>
}

[huozhi]

Also need to document that in server components, so far only key serialization APIs are available

[promer94]

https://swr.vercel.app/docs/with-nextjs#rsc

[Southclaws]

Is there a workaround for codegen workflows? I'm getting this here from Orval (issue referenced above) but even though the component importing this code is "use client" I'm still seeing build failures.

If not, I may just need to fork Orval or do some hacky search+replace or just stop using codegen 🤷

[uh-sman]

I have added the "use client" to my swr setup but I am still getting the Error: Attempted to call the default export of C:\Users\USER\Desktop\campusBite\campus-bite\hooks\useCategory.ts from the server but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.