Next 13: experimental appDir breaks useSWR

[andrewcoelho]

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: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
Node: 18.12.0
npm: 8.19.2
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.1-canary.2
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Default Home component from yarn create next-app

export default function Home() {
  const { data, error } = useSWR("/api/hello", (...args) =>
    fetch(...args).then((res) => res.json())
  );
  ...
}

errors with
TypeError: Cannot read properties of null (reading 'useContext') with an invalid hook call warning

removing

experimental: {
  appDir: true,
},

from next.config.js resolves the issue.

Expected Behavior

useSWR should work when the experimental app directory is enabled

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-arthzt?file=pages/index.tsx

To Reproduce

use

experimental: {
  appDir: true
}

and useSWR from swr together

[armandodlvr]

I think the problem is that you are using SWRConfig in a server component. Remove it and useSWR will work fine.

[shuding]

useSWR is client only and cannot be used in server components. You can add "use client" on the top of your page file to convert it to a client component.

[andrewcoelho]

@shuding that doesn't seem like a solution considering this problem is happening in the /pages directory and the behavior in that directory is supposed to be unchanged to allow for incremental adoption.

If you look at the reproduction link I posted you can see that there isn't an /app directory being used at all. Simply adding the experimental appDir flag causes this issue.

[shuding]

Thought it was in app/ — yeah that's indeed a bug if it happens in pages/!

[lukemorales]

It seems that the repro is missing the app directory, perhaps it's breaking because by enabling the feature, Next makes app the root directory and if you don't have the root layout.tsx it breaks because it doesn't have an HTML to render? Just fixed another issue reproduction by doing exactly that: #42263 (comment)

[shuding]

Thanks for your input @lukemorales and that's indeed the case! Although Next.js shouldn't behavior like that, at least shouldn't throw such a strange error. Let me see if I can fix it or improve the error.

[armandodlvr]

It was fixed in version 13.0.2

[rafinskipg]

happened to me too on version 13.0.2, removed the app dir experimental feature and worked again

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.