Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 task done
Nefcanto opened this issue Nov 7, 2022 · 4 comments · Fixed by #42741
Closed
1 task done

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

Nefcanto opened this issue Nov 7, 2022 · 4 comments · Fixed by #42741
Assignees
@shuding
Labels
area: app App directory (appDir: true)

Comments

@Nefcanto
Copy link

Nefcanto commented Nov 7, 2022

Verify canary release

  • 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')
@Nefcanto Nefcanto added the bug Issue was opened via the bug report template. label Nov 7, 2022
@timneutkens timneutkens added the area: app App directory (appDir: true) label Nov 7, 2022
@magnattic
Copy link

magnattic commented Nov 7, 2022 •
edited

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.

@balazsorban44 balazsorban44 added kind: bug and removed bug Issue was opened via the bug report template. labels Nov 8, 2022
@shuding shuding self-assigned this Nov 8, 2022
@gadingnst
Copy link

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

@shuding shuding mentioned this issue Nov 10, 2022
Merged
11 tasks
@shuding
Copy link
Member

shuding commented Nov 10, 2022

@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.

shuding added a commit that referenced this issue Nov 10, 2022
@shuding @kodiakhq
Eagerly bundle external ESM dependencies for pages (#42741)
276533d 
One potential risk is ESM dependencies that can't be bundled will cause
a build error. This also means that the `esmExternals` configuration
will be affected.

Closes #42249, closes #42588. Related: #1395.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 11, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@shuding shuding

Labels
area: app App directory (appDir: true)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Eagerly bundle external ESM dependencies for pages vercel/next.js
6 participants
@shuding @timneutkens @magnattic @Nefcanto @balazsorban44 @gadingnst