how to resolve "Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0" console issue?

Question

i am trying tab in next in next.js, but every time i use it it show a console warning link this Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0", i know it isn't effect my app but it is so annoying. how to solve this waring

<Tabs>
  <div className="tab-controler ml-sm-auto">
    <TabList className="tab-lists list-inline d-flex  flex-wrap nav mb-3" style={{ background: '#F8F8F8' }}>
      <Tab className={`${CostCalculatorStyle.PEItem} tab-lists__item`}>Buy & Ship for me</Tab>
      <Tab className={`${CostCalculatorStyle.PEItem} tab-lists__item`}>Ship for me</Tab>
    </TabList>
  </div>
  <TabPanel key={"tabpanel_ship"}>
    <div className="row">
      <div className="col-lg-6">
        <ShipForMeForm handleFormValue={handleFormValue} handleProductValue={handleProducts} handleRef={handleRef} />
      </div>
      <div className="col-lg-6 align-self-center">
        <div className="costcalc-empty-thumb text-center">
          <Image
            src="/assets/topNavbarPages/costCalculator.svg"
            alt="Cost Calculator"
            width="469"
            height="288"
          />
        </div>
      </div>
    </div>
  </TabPanel>
  <TabPanel key={"tabpanel_buy_ship"}>
    <div className="row">
      <div className="col-lg-6">
        <ShipForMeForm handleFormValue={handleFormValue} handleProductValue={handleProducts} handleRef={handleRef} />
      </div>
      <div className="col-lg-6 align-self-center">
        <div className="costcalc-empty-thumb text-center">
          <Image
            src="/assets/topNavbarPages/costCalculator.svg"
            alt="Cost Calculator"
            width="469"
            height="288"
          />
        </div>
      </div>
    </div>
  </TabPanel>
</Tabs>

as you can see i use react-tabs for tab but i also work on react js where i use the same code but it didn't show this console warning. so my question is why it is happing? and how i can solve it ?

Answer 1

In next js i fixed it like that

import dynamic from 'next/dynamic'
const Tabs = dynamic(import('react-tabs').then(mod => mod.Tabs), { ssr: false }) // disable ssr
import { Tab, TabList, TabPanel } from 'react-tabs'

it work for me

Answer 2

NextJs generating code in server side as you know.

This error means that something on the server is different from the Client. This can happen if the client does a re-render.

For example.

export default function Test(props) {
  return (
    <>
      <span>{props.name}</span>
    </>
  );
}

I have this simple Test component.And I send name (1) prop from another component to this Test component. And if I change this name (to 2) in client using redux (for example I have another name in my redux store) after page generated I get this error.

props did not match server "1" client "2"

To solve this error I need to just not change this name with redux after page generated in server. The data can be change only with user manipulations after page rendered in server.

Answer 3

In case you miss it

If you are using Nextjs + Material-ui, there are actually custom codes that you can/need to include in your _document.js and _app.js to remove the server-side injected CSS so the CSS is recreated when page loads.

As codes changes with mui's and nextjs' version, i will refer you to the repository directly

https://github.com/mui-org/material-ui/tree/master/examples/nextjs/pages

Answer 4

The best solution I know of is just to set the id yourself in the <Tabs> component. Ex: <Tabs id={1}>

See https://github.com/chakra-ui/chakra-ui/issues/4328#issuecomment-890525420 for more details and examples.

Answer 5

As per the documentation in the react-tabs repo/npmjs.org page (https://www.npmjs.com/package/react-tabs):

import { resetIdCounter } from 'react-tabs';

resetIdCounter();

ReactDOMServer.renderToString(...);

I was having the same issue and called the resetIdCounter function inside my parent component to the tabs structure and cleared up the error.

Not sure if maybe there is a better place to use this function, like maybe in a useEffect hook or something, but I'm going with this for now.

Answer 6

Same thing happened to me when I use Tabs from react-bootstrap. Koushik Saha's answer can be apply for that also but with a small change. Need to put react-bootstrap instead react-tabs

const Tabs = dynamic(import('react-bootstrap').then(mod => mod.Tabs), { ssr: false })