search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering. #1036

Closed koolii closed 5 months ago

koolii commented 5 months ago

Do you want to request a feature or report a bug?

Report a bug with react-toastify@v10

it might be related below

where to be fixed

https://github.com/fkhadra/react-toastify/blob/91c29d72a64227d8c8f36e6969fac10c8db421df/src/hooks/useToastContainer.ts#L10-L11

What is the current behavior?

スクリーンショット 2024-01-15 11 52 38

it occurs an error which says this title. following is the stack trace.

at Object.useSyncExternalStore (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5214:11)
    at useSyncExternalStore (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react@18.2.0/node_modules/react/cjs/react.development.js:1676:21)
    at L (file:///Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-toastify@10.0.0_react-dom@18.2.0_react@18.2.0/node_modules/react-toastify/dist/react-toastify.esm.mjs:2:4353)
    at q (file:///Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-toastify@10.0.0_react-dom@18.2.0_react@18.2.0/node_modules/react-toastify/dist/react-toastify.esm.mjs:2:14002)
    at renderWithHooks (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/koolii/ghq/github.com/sample/frontend/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

Components should be rendered

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 8.14.0
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
mwalden2004 commented 5 months ago

Having the same problem when upgrading to v10, I am on Windows 10, node v21.1.0

kode15333 commented 5 months ago

I had the same problem after the update

ashish-ts commented 5 months ago

Facing same issue with v10, reverting back to 9.1.3 fixed the problem.

oskarhertzman commented 5 months ago

same here, nextjs 14.0.4, react 18.2.0

viclafouch commented 5 months ago

Same here

fkhadra commented 5 months ago

Should be addressed with the latest patch

Vinnl commented 5 months ago

Can confirm that the latest patch fixes it, thank you!

fkhadra commented 5 months ago

@Vinnl thanks for the confirmation!

fabb commented 5 months ago

hm, are you sure that getSnapshot always the same value on server and client during hydration? if not, that could introduce subtle bugs.

jacobsfletch commented 4 months ago

Confirming that bumping from v10.0.0 to v10.0.4 worked for me too. Thanks everyone!