What an import really reads
A module behaves like an object of exports, and the default export is stored under the name default. Asking for a name that isn't there gives undefined, and rendering undefined as a component is React's "Element type is invalid" error. This example throws on purpose.
Real React apps keep components in separate files and connect them with JavaScript modules: a file shares a component with export (default or named) and another file brings it in with the matching import.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Button.jsx contains export function Button() {...} and export const SIZES = ["sm", "md"]. Write the one import line that brings both into App.jsx (same folder).
Split this into Card.jsx (default export) and App.jsx:
``jsx
function Card() {
return <div className="card">Hello</div>;
}
export default function App() {
return <Card />;
}
Explain it without notes
What is the difference between a default export and a named export? How do you import each?
A teammate gets Element type is invalid … got: undefined. What are the likely causes?
Why do React projects usually put one component per file?
What does ./, ../ and a bare name like react mean in an import path?
Preview
Console
Nothing logged yet.Expected console output
default import is a function
named import is undefined
Uncaught 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.
Check the render method of `App`.
An error occurred in the <main> component.
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.