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

persistAtom error on initialLoad #44

Open
deshario opened this issue Aug 23, 2021 · 3 comments
Open

persistAtom error on initialLoad #44

deshario opened this issue Aug 23, 2021 · 3 comments

Comments

@deshario
Copy link

deshario commented Aug 23, 2021 •
edited
Loading

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
Copy link

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
Copy link

Any update?

@Maxe12
Copy link

Maxe12 commented Jan 19, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rutcreate @deshario @Maxe12 @muqshots