title: These errors are preventing my nodejs app from loading
body: <p>I am getting these errors while rendering the page.
  My project is based on NodeJs + React.</p>
  <p>I'm using these version.
  react version : ^16.5
  react-dome : ^16.5
  @material-ui/core : ^4.9.1
  @material-ui/icons : ^4.9.1&quot;</p>
  <p>First error:</p>
  <pre><code>Tooltip.js:479 Uncaught TypeError: Cannot read property 'className' of undefined
  at Tooltip (Tooltip.js:479)
  at renderWithHooks (react-dom.development.js:14803)
  at updateForwardRef (react-dom.development.js:16816)
  at beginWork (react-dom.development.js:18645)
  at HTMLUnknownElement.callCallback (react-dom.development.js:188)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
  at invokeGuardedCallback (react-dom.development.js:292)
  at beginWork$1 (react-dom.development.js:23203)
  at performUnitOfWork (react-dom.development.js:22157)
  at workLoopSync (react-dom.development.js:22130)
  </code></pre>
  <p>Second error:</p>
  <pre><code>The above error occurred in the &lt;ForwardRef(Tooltip)&gt; component:
  in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
  in WithStyles(ForwardRef(Tooltip)) (created by Block)
  in div (created by Block)
  in Block (created by BlockAnimation)
  in div (created by PoseElement)
  in PoseElement (created by Context.Consumer)
  in Unknown (created by BlockAnimation)
  in Transition (created by PoseGroup)
  in PoseGroup (created by BlockAnimation)
  in div (created by BlockAnimation)
  in BlockAnimation (created by Route)
  in Route (created by withRouter(BlockAnimation))
  in withRouter(BlockAnimation) (created by Navigation)
  in div (created by Navigation)
  in div (created by Navigation)
  in div (created by ForwardRef(Toolbar))
  in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
  in WithStyles(ForwardRef(Toolbar)) (created by Navigation)
  in header (created by ForwardRef(Paper))
  in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
  in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
  in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
  in WithStyles(ForwardRef(AppBar)) (created by Navigation)
  in div (created by Navigation)
  in Navigation (created by Connect(Navigation))
  in Connect(Navigation) (created by Route)
  in Route (created by withRouter(Connect(Navigation)))
  in withRouter(Connect(Navigation)) (created by ReduxWrapper)
  in div (created by ReduxWrapper)
  in ReduxWrapper (created by Connect(ReduxWrapper))
  in Connect(ReduxWrapper) (created by Root)
  in div (created by Root)
  in Root (created by Route)
  in Route
  in div
  in Router (created by ConnectedRouter)
  in ConnectedRouter
  in Provider
  in AppContainer
  </code></pre>
  <p>I'm not able to figure out what does it mean.</p>
  <p><a href="https://i.stack.imgur.com/8ov8O.png" rel="nofollow noreferrer">Errors are thrown into this page.</a></p>
  <p>using tooltip like this:</p>
  <pre class="lang-js prettyprint-override"><code>    import React, { Component } from 'react';
      import Tooltip from '@material-ui/core/Tooltip';
      import styles from './styles.css';
      
      class Block extends Component
      {
              state = {tooltipOpen:false};
      
          open = () =&gt; {
              this.setState({
                  tooltipOpen: true
              });
          }
      
          close = () =&gt; {
              this.setState({
                  tooltipOpen: false
              });
          }
      
          render ()
          {
              const {
                  state: { tooltipOpen },
                  props:{num}
              } = this;
              return (
                  &lt;div&gt;
                      &lt;div id={`block${num}`} className={`${styles['bar']} d-inline-flex`} onClick={(i)=&gt;this.props.onClick({num})}&gt;&lt;/div&gt;
                      &lt;Tooltip title={`block${num}`} placement=&quot;bottom&quot; open={tooltipOpen} onOpen={this.open}
                          onClose={this.close}
                          enterDelay={250}&gt;
                          {`Block: ${num}`}
                      &lt;/Tooltip&gt;
                  &lt;/div&gt;
              );
          }
      }
      
      export default Block;
  </code></pre>