Geethika•15mo ago

Server ErrorError: Element type is invalid: expected a string (for built-in components)...

I am getting this error in console and also when I go to the page personal-info in my next.js project! ---> Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. I am trying to route to personal-info page from sign up page. Code snippets: >> Function that handles what happens after recieveing sign up OTP ,

const handleOtp = async (otpNumber, phoneNumber,userPassword) => {
    try {
      setLoading(true);
      ....
      if (error) throw error;
      else {
        alert("Welcome!");
        router.push('/personal-info')
      }
    ...
 } catch (error) {
      //console.log(phoneNumber, otpNumber,userPassword);
      alert(error.error_description || error.message);
    } finally {
      setLoading(false);
    }
  };

>> Personal info page code

import PersonalDetails from "../components/PersonalDetails"

 const PersonalInfo = () => {

    return (
        <>
        <PersonalDetails/>
        </>
        
    )
}

export default PersonalInfo >> Personal details page code snippets

...
 const goToHomePage = () => {

        router.push('/')
    }
...
  <Button size="lg"

                                className="button block"
                                onClick={goToHomePage}
                            >
                                <span>Save</span>
                            </Button>
...

9 Replies

Unknown User•15mo ago

Message Not Public

Geethika•15mo ago

I have formatted the code Please check I think we can rule out the first option

Unknown User•15mo ago

Message Not Public

Geethika•15mo ago

actually that's not possible you can tell me if u need to see any additional code

Unknown User•15mo ago

Message Not Public

Geethika•15mo ago

okay, I will check n update

Geethika•15mo ago

So I found the soln. to the problem from : https://stackoverflow.com/questions/39047130/react-bootstrap-importing-modules .

Stack Overflow

React-Bootstrap - importing modules

I'm trying to use react-bootstrap. See the code below. If I load individual modules (eg. Button, ButtonGroup, etc.), it works fine. I'd rather, however, import the whole ReactBootstrap (like in lin...

Geethika•15mo ago

" react-bootstrap doesn't have a default export, so the default import syntax (import ReactBootstrap from 'react-bootstrap') cannot be used in this case. You can do the following though: import * as ReactBootstrap from 'react-bootstrap'; <ReactBootstrap.Button bsStyle="success" bsSize="small"> Something </ReactBootstrap.Button> "

Unknown User•15mo ago

Message Not Public