Error: Element type is invalid: expected a string (for built-in components) | React.js | Next.js

Unhandled Runtime 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 was getting the above error on importing a component into another component in my Next.js/React.js project.

Here is the component I was trying to import.

import cx from 'classnames';
import styles from '../styles/Signin.module.css'

export default Signin;

function Signin() {
  return (
    <>

      <main className={cx(styles["form-signin"],"text-center","mt-5")}>
        <form>
          <h1 className="h3 mb-3 fw-normal">Please sign in</h1>

          <div className="form-floating">
            <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com" />
            <label htmlFor="floatingInput">Email address</label>
          </div>
          <div className="form-floating">
            <input type="password" className="form-control" id="floatingPassword" placeholder="Password" />
            <label htmlFor="floatingPassword">Password</label>
          </div>

          <div className={cx(styles.checkbox,"mb-3")}>
            <label>
              <input type="checkbox" value="remember-me" /> Remember me
            </label>
          </div>
          <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
        </form>
      </main>

    </>
  )
}

And this is the component which was trying to import.

import { Signin } from './signin';

export default function Root(){
    return(
        <>
            <Signin></Signin>
        </>
    )
}

Issue: I was exporting the component class using default keyword and hence there is no need to destructure it. So, curly braces are not required.

Solution:

import Signin from './signin';

export default function Root(){
    return(
        <>
            <Signin></Signin>
        </>
    )
}