recoil-persist
recoil-persist copied to clipboard
Published
20 hours ago •
polemius
polemius
persistAtom error on initialLoad
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",
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?
I had the same problem and eventually found a workaround here: https://stackoverflow.com/a/70459889/12298350
