TypeError: Cannot read properties of null (reading 'useState')

[Nefcanto]

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #43-Ubuntu SMP Wed Jun 15 12:54:21 UTC 2022
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.3-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 107.0.5304.87 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

No response

Describe the Bug

After upgrading an existing website to Next 13, when appDir is enabled swiper code fails. The issue is reported to the swiper team here, but they said it's related to the Next.

Expected Behavior

Swiper and Next 13 should work together, or an informative message should be shown to help easier debugging.

Link to reproduction

https://github.com/Nefcanto/swiper-bug

To Reproduce

1- Clone 2- npm install 3- npm run dev 4- go to localhost:3000 5- You should see TypeError: Cannot read properties of null (reading 'useState')

[magnattic]

I have similar problems with our existing big application. We upgraded to next 13 just fine, but as soon as we enable the appDir feature it fails with TypeError: Cannot read properties of null (reading 'useState'). This is happening for pages in the pages/ dir which I would expect to be unaffected.

Unfortunately I cannot share the code, it's a private repo.

[gadingnst]

have similar issues here, even though I've already used the directive 'use client'; in the component which uses hooks.

[shuding]

@gadingnst Mind sharing your code? I'm curious the place that you added the 'use client' directive, because the original bug reproduction by @Nefcanto doesn't have an app directory at all.