Warning: Prop `id` did not match. Server: "accordion-button-3" Client: "accordion-button-6"

Description

Whenever I use an accordion with NextJs, I get mismatches for ids.

Link to Reproduction

https://codesandbox.io/s/snowy-thunder-gxsfl?file=/pages/index.tsx:0-1603

Steps to reproduce

First thing first, I can’t reproduce it with the codesandbox. I think it’s running next start while you only see the errors with next dev…

I still linked a codesandbox with something that will reproduce the problem when ran in local.

To reproduce, I simply create a new page, let’s say “accordion.tsx” with this code taken directly from the documentation:

import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Box,
  Heading
} from "@chakra-ui/react";
import React from "react";

export default function IndexPage() {
  return (
    <article>
      <Heading>Welcome to Chakra UI example</Heading>
      <Accordion allowToggle>
        <AccordionItem>
          <h2>
            <AccordionButton as="button" id="ttr">
              <Box flex="1" textAlign="left">
                Section 1 title
              </Box>
              <AccordionIcon />
            </AccordionButton>
          </h2>
          <AccordionPanel pb={4}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem>
          <h2>
            <AccordionButton>
              <Box flex="1" textAlign="left">
                Section 2 title
              </Box>
              <AccordionIcon />
            </AccordionButton>
          </h2>
          <AccordionPanel pb={4}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    </article>
  );
}

Load the page, look at the console and I get:

Warning: Prop `id` did not match. Server: "accordion-button-3" Client: "accordion-button-6"

This is new from Chakra 1.6.4.

Everything was working fine in my project with 1.6.3.

When I migrated to 1.6.4, I saw there had been a big modification for generating ids so they could better match between server and client. (supposedly, I never had the problem before so I have no idea why it was “fixed”)

I looked at the modified file and it was a huge change. I tried it as is, but I couldn’t make it work at all in my project because with 1.6.4 pretty much all ids were a mismatch now…

Since I was using Chakra’s useId hook for my own custom components, I created a new useId with the old code and removed the import from Chakra. Everything went back to normal.

I didn’t use any accordion at the time, so I never saw any other problem. But obviously, anything that would use Chakra 1.6.4 useId will behave incorrectly with NextJs, as we can see with Accordion.

I figured someone would eventually create an issue because the console is completely red when used with NextJs in SSG… Turns out I’m the first to report it after all 😦

Chakra UI Version

1.6.4

Browser

MS Edge 91.0.864.64 (latest at the moment)

Operating System

• macOS
• Windows
• Linux

Additional Information

I tried passing my own id to the accordion button, but it’s simply ignored by Chakra implementation, it overrides it with it’s own automatic id. This should be looked at, if I could somehow pass my own id, I could easily patch in the old version to generate ids, the one that worked 100% with NextJs.

Screenshot of a simple page with only the accordion on it

Screenshot of the console for that same page

Screenshot of React Dev Tools on the Accordion Button (id = “ttr”)

Screenshot of React Dev Tools on the Accordion Button sub component “button” (id = “accordion-button-6”)

I have no idea why on the server the id is accordion-button-3 while on the client it’s accordion-button-6.

My repository is private, but I could invite someone from the staff to debug it if necessary.

If you require anything else, don’t hesitate to ask.

Regards,

TheThirdRace

[yuyaamano23]

I got the following error when using the tabs component. code:

<Tabs variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

So I added an id to the first <Tabs> and the error is resolved!!!

code:

<Tabs variant="enclosed" id="1">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

[pcs980]

Same issue with menu here. Solved by using id. Thanks, @yuyaamano23.

<Menu isLazy id={`${p._id}-menu-id`}>
  <MenuButton
    as={IconButton}
    icon={<Icon as={RiMore2Line} fontSize='20' />}
    aria-label='actions'
    variant='outline'
    borderRadius={8}
  />
  <MenuList color={`${primaryColor}.900`}>
    <MenuItem color='red.500'>
      Close
    </MenuItem>
  </MenuList>
</Menu>