search

sanity-io / next-sanity

Sanity.io toolkit for Next.js
https://www.sanity.io/
MIT License
760 stars 91 forks source link

Warning: Invalid hook call. #707

Closed pixelass closed 6 months ago

pixelass commented 12 months ago

1st reproduction (pages dir): https://github.com/pixelass/sanity-check

2nd reproduction (app dir): https://github.com/pixelass/sanity-check-2

Describe the bug

After adding SanityStudio in my Next.js app I get warings:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

To Reproduce

Steps to reproduce the behavior:

  1. Go to terminal
  2. enter npx create next app
    • choose TS
    • choose src dir
    • choose eslint
    • NO tailwind
    • NO app directory
  3. Enter npm create sanity@latest -- --project XXX --dataset production --provider github
    • choose typescript
    • choose /admin as route
    • NO app directory
  4. Navigate to /admin
  5. Run npm run dev

Or

  1. Go to terminal
  2. git clone git@github.com:pixelass/sanity-check.git
  3. npm i
  4. Navigate to /admin
  5. Run npm run dev

Expected behavior

A clear and concise description of what you expected to happen.

I expect NO warnings about invalid hook calls

Which versions of Sanity are you using?

@sanity/cli (global)  3.18.1 (up to date)
@sanity/image-url      1.0.2 (up to date)
@sanity/vision        3.18.1 (up to date)
sanity                3.18.1 (up to date)

What operating system are you using?

(irrelevant)

windows 11

Which versions of Node.js / npm are you running?

npm 9.6.7
node v18.17.1

Additional context

I prepared a Reproduction Repo following the steps above.

  1. Setup Next
  2. add Sanity

No additional setup was done. This is as vanilla as it gets.

Link: https://github.com/pixelass/sanity-check

realted to https://github.com/sanity-io/next-sanity/issues/665

pixelass commented 12 months ago

Not sure if noteworthy:

+-- @sanity/vision@3.18.1
| +-- @rexxars/react-json-inspector@8.0.1
| | `-- react@18.2.0 deduped
| +-- @rexxars/react-split-pane@0.1.93
| | `-- react@18.2.0 deduped
| +-- @sanity/icons@2.6.0
| | `-- react@18.2.0 deduped
| +-- @sanity/ui@1.8.3
| | +-- @floating-ui/react-dom@2.0.0
| | | `-- react@18.2.0 deduped
| | `-- react@18.2.0 deduped
| +-- @uiw/react-codemirror@4.21.20
| | `-- react@18.2.0 deduped
| `-- react@18.2.0 deduped
+-- next-sanity@5.5.8
| +-- @sanity/preview-kit@3.2.0
| | `-- react@18.2.0 deduped
| `-- react@18.2.0 deduped
+-- next@13.5.4
| +-- react@18.2.0 deduped
| `-- styled-jsx@5.1.1
|   `-- react@18.2.0 deduped
+-- react-dom@18.2.0
| `-- react@18.2.0 deduped
+-- react@18.2.0
+-- sanity@3.18.1
| +-- @dnd-kit/core@6.0.8
| | +-- @dnd-kit/accessibility@3.0.1
| | | `-- react@18.2.0 deduped
| | `-- react@18.2.0 deduped
| +-- @dnd-kit/modifiers@6.0.1
| | `-- react@18.2.0 deduped
| +-- @dnd-kit/sortable@7.0.2
| | `-- react@18.2.0 deduped
| +-- @dnd-kit/utilities@3.2.1
| | `-- react@18.2.0 deduped
| +-- @sanity/logos@2.1.2
| | `-- react@18.2.0 deduped
| +-- @sanity/portable-text-editor@3.18.1
| | +-- react@18.2.0 deduped
| | `-- slate-react@0.98.1
| | +-- use-callback-ref@1.3.0
| | | `-- react@18.2.0 deduped
| | `-- use-sidecar@1.1.2
| |   `-- react@18.2.0 deduped
| +-- react-refractor@2.1.7
| | `-- react@18.2.0 deduped
| +-- react-rx@2.1.3
| | `-- react@18.2.0 deduped
| +-- react@18.2.0 deduped
| +-- use-device-pixel-ratio@1.1.2
| | `-- react@18.2.0 deduped
| +-- use-hot-module-reload@1.0.3
| | `-- react@18.2.0 deduped
| `-- use-sync-external-store@1.2.0
|   `-- react@18.2.0 deduped
`-- styled-components@5.2.3
  `-- react@18.2.0 deduped
+-- @sanity/vision@3.18.1
| +-- @rexxars/react-split-pane@0.1.93
| | `-- react-dom@18.2.0 deduped
| +-- @sanity/ui@1.8.3
| | +-- @floating-ui/react-dom@2.0.0
| | | `-- react-dom@18.2.0 deduped
| | `-- react-dom@18.2.0 deduped
| `-- @uiw/react-codemirror@4.21.20
|   `-- react-dom@18.2.0 deduped
+-- next@13.5.4
| `-- react-dom@18.2.0 deduped
+-- react-dom@18.2.0
+-- sanity@3.18.1
| +-- @dnd-kit/core@6.0.8
| | `-- react-dom@18.2.0 deduped
| +-- @sanity/portable-text-editor@3.18.1
| | `-- slate-react@0.98.1
| |   `-- react-dom@18.2.0 deduped
| +-- framer-motion@10.16.4
| | `-- react-dom@18.2.0 deduped
| `-- react-dom@18.2.0 deduped
`-- styled-components@5.2.3
  `-- react-dom@18.2.0 deduped
stipsan commented 12 months ago

Hi,

Do you have a use client directive in the page.tsx file you're loading the studio?

pixelass commented 12 months ago

Hi,

Do you have a use client directive in the page.tsx file you're loading the studio?

We are using the pages directory (no app router)

Everything was generated by sanity

https://github.com/pixelass/sanity-check/blob/main/src/pages/admin/%5B%5B...index%5D%5D.tsx

pixelass commented 12 months ago

@stipsan for the sake of complete testing I added a second reproduction where I used the app-router: https://github.com/pixelass/sanity-check-2

The process was as follows:

  1. Go to terminal
  2. enter npx create next app
    • choose TS
    • choose src dir
    • choose eslint
    • NO tailwind
    • NO app directory
  3. Enter npm create sanity@latest -- --project XXX --dataset production --provider github
    • choose typescript
    • choose /admin as route
    • choose app directory
  4. Run npm run dev
  5. Navigate to /admin

There are no logs in the web console but there are hook warnings in the node console.

image