Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Collapse] Rehydration missmatch warnings when using Collapse on v1

See original GitHub issue

I’m having a rehydration missmatch warnings when using Collapse on a Next.js app.

Warning: Prop `className` did not match. Server: "rah-static rah-static--height-zero css-vppuuz" Client: "rah-static rah-static--height-zero css-1asjk0u-Collapse"
    in div (created by AnimateHeight)
    in AnimateHeight (created by Context.Consumer)
    in EmotionCssPropInternal (created by Collapse)
    in Collapse (at pages/index.jsx:17)
    in ColorModeProvider (created by ChakraProvider)
    in ThemeProvider (created by ChakraProvider)
    in ChakraProvider (at pages/index.jsx:14)
    in Home (created by App)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

Link to minimal reproduction https://github.com/santialbo/throwaway-chakra-bug-repro

Steps to Reproduce (repro repo followed this steps)

npx create-next-app
cd my-app
yarn add @chakra-ui/core@1.0.0-rc.0 @chakra-ui/theme@1.0.0-rc.0
yarn dev

with the following on my-app/pages/index.js

import React from "react";
import {
  Button,
  ChakraProvider,
  Collapse,
  useDisclosure,
  CSSReset,
} from "@chakra-ui/core";
import theme from "@chakra-ui/theme";

const Home = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <ChakraProvider theme={theme}>
      <CSSReset/>
      <Button colorScheme="green" onClick={onOpen}>Open</Button>
      <Collapse isOpen={isOpen}>
        <Button colorScheme="red" onClick={onClose}>Close</Button>
      </Collapse>
    </ChakraProvider>
  );
};

export default Home;