Error: Minified React error #130: Element type is invalid: expected a string or a class/function but got: undefined

Question

I'm building an app in reactJS and I have a problem only on PRODUCTION build (everything is fine on dev)

I identified the problem but can't resolve it, I have a class named 'Dashboard' and a subcomponent in it, and another subcomponent in the subcomponent that make the app raise Error 130.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Here is my code:

export class Dashboard extends React.Component {

    loginTextBox = () => {
        return (<div> Hello World</div>)
    }

    connectionPannel = () => {
        return(<div>
            <this.loginTextBox></this.loginTextBox>   /* IF I COMMENT THIS, IT WORKS */
        </div>)
    }


    render() {
        return(<div className="h-100">
            <this.connectionPannel></this.connectionPannel>
        </div>);
    }
}

to deploy I use: yarn build and then i used serve -s build or a dedicated server

Answer 1

From what I can tell, this is a babel compilation bug actually. I'd recommend either inlining the JSX or extracting those bits to actual function components:

// inline the JSX
export class Dashboard extends React.Component {
    render() {
        return (
            <div className="h-100">
                <div>
                  <div>Hello World</div>
                </div>
            </div>
        );
    }
}

// extract to components

export class Dashboard extends React.Component {
    render() {
        return(<div className="h-100">
            <ConnectionPannel />
        </div>);
    }
}

function ConnectionPannel() {
  return (
    <div>
      <LoginTextBox />
    </div>
  )
}

function LoginTextBox() {
  return <div>Hello World</div>
}

In that case you'd also need to pass things as props. That's arguably more idiomatic React.

You could also invoke the function as shared in this answer but there's not really any benefits to that approach.

Answer 2

You should update the function

    connectionPannel = () => {
        return(<div>
            {this.loginTextBox()}
        </div>)
    }