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.

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

Error: Missing getServerSnapshot, which is required for server-rendered content. #987

Closed
ZMonk91 opened this issue Jun 2, 2022 · 4 comments

Comments

@ZMonk91
Copy link

ZMonk91 commented Jun 2, 2022

It seems this error happens whenever I try to use any hooks in Next.js. I saw this error referenced earlier in the issues but it said it was fixed in4.0.0-beta.3, I am using 4.0.0-rc.1 which I believe is a later update. Regardless, switching to 4.0.0-beta.3 still causes the same issue.
#886

This is my first time trying Zustand, so perhaps I've set it up wrong.

Store.jsx:

import create from 'zustand'

const useStore = create((set) => ({
    particles: 0,
    increaseParticles: () => set((state) => ({particles: state.particles +1})),
    removeAllParticles: () => set((state) => ({particles: 0})),
}))

Particles.jsx:

import React from "react";
import { HStack, Heading, Box, Badge, Center } from "@chakra-ui/react";
import { useStore } from "zustand";

export default function Particles() {

    // State
    const particles = useStore((state) => state.particles);

    // Responsiveness
    const responsiveTypography = {
        base: "sm",
        md: "md",
        lg: "lg"
    }
  return (
		<Center>
			<Heading size={responsiveTypography} >
				{particles} Particles
				<Badge colorScheme="green" size="lg">
					0/s
				</Badge>
			</Heading>
		</Center>
	)
};

zustand_error

@ZMonk91
Copy link
Author

ZMonk91 commented Jun 2, 2022

I have found the solution, as reported in an earlier issue. My linter automatically imported useStore from 'zustand'. This should be made more clearly in the docs though.

Please do not use `import { useStore } from 'zustand'`. That's for different use cases.

Originally posted by @dai-shi in #963 (comment)

@ZMonk91 ZMonk91 closed this as completed Jun 2, 2022
@dai-shi
Copy link
Member

dai-shi commented Jun 2, 2022

My linter automatically imported

Wow, I overlooked this situation. How could it be made more clearly in docs? Suggestion PRs are welcome.

@appohfaiths
Copy link

@dai-shi It's my first time using Zustand today and I encountered the same error. Can the docs be clearer on specifying where 'useStore' should be imported from since 'useStore' is what's used as the example. I scanned several webpages before finding the solution here.

@dai-shi
Copy link
Member

dai-shi commented Sep 15, 2023

@appohfaiths I think we fixed most of useStore usage in examples, they should be useBoundStore or something else. If there's still something missing, please feel free to open a PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants