persistAtom error on initialLoad

deshario commented 2 years ago

Did not expect server HTML to contain a <span> in <div>.

persistAtom will create an error as above on initial load. which will effects on layout to be broken a little ... Is there anything that missing from me to prevent this problem ?

** Atoms **

export const keySecret = atom({
  key: "keySecret",
  default: {
    mKey : '',
    mSecret : ''
  },
  effects_UNSTABLE: [persistAtom] // Problem
})

** _app.tsx **

<>
  <Head>
    <title>Title</title>
  </Head>
  <ApolloProvider client={apolloClient}>
    <RecoilRoot>
      <RootLayout {...pageProps}>
        <Component {...pageProps} />
      </RootLayout>
    </RecoilRoot>
  </ApolloProvider>
</>

** Dependencies **

"next": "^11.1.0",
"antd": "4.15.6",
"recoil-persist": "^3.0.0",

Screen Shot 2564-08-23 at 09 32 28

rutcreate commented 2 years ago

Same here. It happens when server and client produce difference HTML because you conditionally display element by recoil state from local storage but server has no idea about local storage.

@deshario Did you find workaround for this?

muqshots commented 2 years ago

Any update?

Maxe12 commented 2 years ago

I had the same problem and eventually found a workaround here: https://stackoverflow.com/a/70459889/12298350

polemius / recoil-persist

persistAtom error on initialLoad #44