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>
</>
)
}