These errors are preventing my nodejs app from loading

Question

I am getting these errors while rendering the page. My project is based on NodeJs + React.

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"

First error:

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)

Second error:

The above error occurred in the <ForwardRef(Tooltip)> 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

I'm not able to figure out what does it mean.

Errors are thrown into this page.

using tooltip like this:

    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 = () => {
            this.setState({
                tooltipOpen: true
            });
        }
    
        close = () => {
            this.setState({
                tooltipOpen: false
            });
        }
    
        render ()
        {
            const {
                state: { tooltipOpen },
                props:{num}
            } = this;
            return (
                <div>
                    <div id={`block${num}`} className={`${styles['bar']} d-inline-flex`} onClick={(i)=>this.props.onClick({num})}></div>
                    <Tooltip title={`block${num}`} placement="bottom" open={tooltipOpen} onOpen={this.open}
                        onClose={this.close}
                        enterDelay={250}>
                        {`Block: ${num}`}
                    </Tooltip>
                </div>
            );
        }
    }
    
    export default Block;

Answer 1

Take a look into this issue on material-ui github https://github.com/mui-org/material-ui/issues/18119

You are using Tooltip from material-ui and his child must be a element, when you use: {`Block: ${num}`} it's wrong. Trying using a with it , like that: <span>{`Block: ${num}`}</ span>

It must be a element so material-ui can pass foward the ref from it. If you look into theis docs you will see that is must be a element https://material-ui.com/pt/api/tooltip/