Server side rendering checksum error

[jamesjjk]

Hi there is a checksum error when using serverside rendering..
(client) tab" id="react-tabs-0" aria-selected="tr
(server) tab" id="react-tabs-4" aria-selected="tr

Any ideas what it could be?

[jamesjjk]

This is the method causing an error when using serverside rendering the ID will always differ client and serverside:

// Get a universally unique identifier
let count = 0;
module.exports = function uuid() {
  return 'react-tabs-' + count++;
};

[jamesjjk]

And the adding of tabs whether or not they have been added:

// Add ids if new tabs have been added
    // Don't bother removing ids, just keep them in case they are added again
    // This is more efficient, and keeps the uuid counter under control
    while (diff++ < 0) {
      tabIds.push(uuid());
      panelIds.push(uuid());
    }

[reaperdtme]

Running into the same problem here. Count, tabIds and panelIds needs to get reset to 0 everytime we call ReactDOMServer.renderToString

[jamesjjk]

@zaiddag Have you forked and are creating a fix?

[reaperdtme]

@jamesjjk not yet, still not sure how to do this without add extra code to SSR implementation, will take a look this weekend

[neeharv]

Any idea when this fix will be released? Running into this issue and it's a blocker for taking this to production.

[neeharv]

Would a possible fix for this be to let the parent component pass an id generating function down? This would work for SSR, as a new function would be sent down for each request. Would be backwards-compatible too. If there is consensus on that, I could quickly hack that out.

[johonathan]

Hi! I'm having the same problem. Did you come up with a solution @neeharv ?

[neeharv]

@johonathan I've started work here - #129

Seems to work, but I'm still unsure if this is a long term solution. Adding an id constructor function to the public API surface seems icky.

[trevordmiller]

I'm consistently reproducing the error as well with varying numbers for each refresh on id="react-tabs-#", not sure if this helps or not but here is my setup:

Here are the relevant bits of my use of react-tabs:

import React from 'react'
import {
  Tab,
  Tabs,
  TabList,
  TabPanel,
} from 'react-tabs'
Tabs.setUseDefaultStyles(false)

export default class Platforms extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      activeTab: 0,
    }
  }

  handleTabClick(clickedTabIndex) {
    this.setState({
      activeTab: clickedTabIndex,
    })
  }

  render() {
    return (
      <Tabs>
        <TabList style={{//style object}}>
          {items.map((item, index) => (
            <Tab
              key={index}
              onClick={this.handleTabClick.bind(this, index)}
              style={{//style object}}
            >
                {item.title}
            </Tab>
          ))}
        </TabList>

        {items.map((item, index) => (
          <TabPanel
            key={index}
            style={{// style object}}
          >
              {item.title}
              {item.body}
          </TabPanel>
        ))}

      </Tabs>
    )
  }
}

Thank you for your time.

[christiearcus]

Hi there, I'm running in to the same issues as described above when server rendering. Just checking whether there is anything planned from the maintainers to address this issue / merge the PR?

Thank you 😸

[lassombra]

What confuses me here, what are the ids used for? Is it just for aria? If so, why can't the aria link be provided? If it's for actual behavior, why aren't refs used instead?

[charrison-symfact]

I'm using react-tabs-isomorphic with ASP.NET Core / MVC with MobX.

The tabs seem to work on both the client and server unless I also use mobx-react-devtools v4.2.11

With the devtools, the tab renders ok (no errors in the console) but I get an error when I try to change tabs.

In react-dom.js it gets null for ReactDOMComponentTree.getInstanceFromNode(node)

(starting with line 2035 in ReactDOM v15.4.2)
if ("development" !== 'production') { var payload = {}; payload[name] = value; ReactInstrumentation.debugTool.onHostOperation({ instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID, type: 'update attribute', payload: payload }); }

The error is:
Uncaught TypeError: Cannot read property '_debugID' of null at Object.setValueForProperty (react-dom.js:2039) at ReactDOMComponent._updateDOMProperties (react-dom.js:6340) at ReactDOMComponent.updateComponent (react-dom.js:6220) at ReactDOMComponent.receiveComponent (react-dom.js:6183) at Object.receiveComponent (react-dom.js:11621) at ReactCompositeComponentWrapper._updateRenderedComponent (react-dom.js:5208) at ReactCompositeComponentWrapper._performComponentUpdate (react-dom.js:5178) at ReactCompositeComponentWrapper.updateComponent (react-dom.js:5099) at ReactCompositeComponentWrapper.receiveComponent (react-dom.js:5001) at Object.receiveComponent (react-dom.js:11621)

Although the error is being thrown by ReactDOM it appears to be an issue that it cannot get the instance properly from the react-tabs component.

I'm just starting to use MobX so I'd really like to use the developer tools if possible.
Thanks!

[Nerlin]

This bug supposed to be fixed atm? I'm still getting checksum errors.

[skyshader]

I am still getting the warnings in the console about tab ids mismatch.

Warning: Prop id did not match. Server: "react-tabs-32" Client: "react-tabs-0"

Do we need to configure something to fix this behaviour?

[joepvl]

@Nerlin @skyshader does this paragraph in the README have what you need? https://github.com/reactjs/react-tabs#resetidcounter-void

[skyshader]

@joepvl That solved it. Thanks a ton :)

[ivan-kleshnin]

The chosen solution is bad as it requires annoying and fragile boilerplate on server side. Not to mention it's not thread safe and will supposedly break with NodeJS clusters.

You'd better use https://github.com/ai/nanoid

[Shaker-Hamdi]

I'm still getting this warning in the console using Next.js ...

Warning: Prop id did not match. Server: "react-tabs-20" Client: "react-tabs-0"

Any idea how to fix this?

[Shaker-Hamdi]

Ok, nevermind, I didn't read @joepvl solution.
Thanks @joepvl

[Nases]

If you are using Next.js,

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'

[GabrielFeliciano]

If you are using Next.js,

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'

This solution worked great for my project. Thanks, @Nases

Note: I'm using typescript, so I had to pass TabsProps to get the prop types of Tabs:

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