react-toolbox: Tabs: "Cannot read property 'getBoundingClientRect' of null"

Problem

Reliably getting an error with HMR updates:Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at Tabs.js:86

Context

• Version: 2.0.0-beta.8
• Error is pointing to this line: https://github.com/react-toolbox/react-toolbox/blob/2.0.0-beta.8/components/tabs/Tabs.js#L85
• In the inspector this.navigationNode equals null
  • THIS IS SUPER SURPRISING since it’s behind a guard clause:

    if (this.navigationNode /* && ... */) {
      // ...
      // somehow this.navigationNode is null !!! object mutation, race condition? inside a callback?
    }
    

• Possibly related: On my team, we’re not using the component to render the content of each tab (props.children of <Tab /> is undefined). We’re only using it for the navigation and we handle displaying tab content somewhere else. Not sure if this is totally relevant.

Possible Solutions

Pull this.navigationNode into a variable.

From

    updatePointer = (idx) => {
      if (this.navigationNode && this.navigationNode.children[idx]) {
        requestAnimationFrame(() => {
          const nav = this.navigationNode.getBoundingClientRect();
          const label = this.navigationNode.children[idx].getBoundingClientRect();
          const scrollLeft = this.navigationNode.scrollLeft;
          this.setState({
            pointer: {
              top: `${nav.height}px`,
              left: `${(label.left + scrollLeft) - nav.left}px`,
              width: `${label.width}px`,
            },
          });
        });
      }

TO

    updatePointer = (idx) => {
      const navigationNode = this.navigationNode
      if (navigationNode && navigationNode.children[idx]) {
        requestAnimationFrame(() => {
          const nav = navigationNode.getBoundingClientRect();
          const label = navigationNode.children[idx].getBoundingClientRect();
          const scrollLeft = navigationNode.scrollLeft;
          this.setState({
            pointer: {
              top: `${nav.height}px`,
              left: `${(label.left + scrollLeft) - nav.left}px`,
              width: `${label.width}px`,
            },
          });
        });
      }