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

kentcdodds · Accepted Answer · 2020-07-27 21:00:48Z

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.

brijesh-pant · Accepted Answer · 2020-07-23 16:26:30Z

0

You should update the function

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

answered Jul 23, 2020 at 16:26

brijesh-pant

1,1851 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related