[Next 13 App Dir]: "You're importing a component that needs" - Even when I'm not rendering one.

[sannajammeh]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:05:47 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T8101
Binaries:
  Node: 16.18.0
  npm: 8.19.2
  Yarn: 1.22.11
  pnpm: 7.17.0
Relevant packages:
  next: 13.0.7
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/sannajammeh/appdir-swr-fail

To Reproduce

1. Clone
2. pnpm install
3. pnpm run dev
4. observe it fail. due to importing a component that needs useRef.

Describe the Bug

When any library using client only hooks is imported the entire page errors. No rendering of client components occurs. Simply importing a function from a library that happens to have a client only hook crashes it.

// layout.tsx
import { unstable_serialize } from "swr"; // Should be able to treeshake this no?

const Layout = () => {
  const test = unstable_serialize(["hello", "world"])
  return <div>

</div>
}

Expected Behavior

The app should render as no client hooks are really used. I simply need the unstable_serialize function to perform some ssr serialization on the server then passing to SWR config.

The desired behavior should be crashing the app once a hook is called, i.e stub the hooks on the server only react and make them throw errors. I dont think blocking the app from running is a good decision here.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[boatilus]

Possibly a duplicate of vercel/next.js#44039?

[sannajammeh]

Possibly a duplicate of vercel/next.js#44039?

Its the same bug but two very different use cases. Both are most likely solved the same way: stub the client only hooks and make them throw errors if called on server, do not prematurely crash the app.

Effectively, SWR with special keys is now useless for ssr if this is not changed. I'm afraid many other libraries are too.

[sannajammeh]

Any movement possible on this?

[samjowen]

Any movement possible on this?

+1.

This is the only thing holding me back being able to use the appDir feature. A fix for this would be greatly appreciated. 👍

[shuding]

vercel/next.js#49714 (comment)

I think useSWR is intended to be used in Client Components only, it does nothing in Server Components, and will run even after hydration, so no data will be fetched.

But I agree that unstable_serialize should be allowed in Server Components. I'll transfer this to the SWR repo as we'll need such kind of separation to be implemented there.

[sannajammeh]

@shuding I definitely agree on useSWR, however I still think that Next shoud be able to tree shake then analyse when checking for client directives, not the other way around.

Great to see this being moved as our library trpc-swr relies on the unstable_serialize to work. Our current workaround for RSC support is to copy and bundle unstable_serialize with the library itself.