The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The error ReferenceError: ComponentName is not defined means your JSX refers to a name that JavaScript cannot find in the scope where the code runs. Start with the exact identifier in the message, then confirm that it is spelled and capitalized the same way everywhere, that it is declared or imported in the file that renders it, and that the declaration is visible at that point in the code.
What the error means
The MDN reference for this ReferenceError describes the cause as a reference to a variable that does not exist, or one that is not available in the current scope. In React, a tag such as <Profile /> is a reference to an identifier named Profile. If the JavaScript engine cannot find a binding with that name where the tag is evaluated, it throws the error and the component never renders.
The message therefore tells you one thing precisely: the name in the message is not available at the point of use. Your job is to find out why. The checks below are ordered from the simplest cause to the least obvious one.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Diagnostic path
1. Read the exact name in the error
Open the browser console or the terminal output and find the name before the words is not defined. Compare it character by character with the tag in your JSX and with the declaration or import. Typical mismatches include a typo (Usrcard versus UserCard), a singular and plural difference (Post versus Posts), and a rename that was applied to the component but not to the import or to the JSX tag.
#1 Best Overall
2. Confirm the component is declared or imported in the file that uses it
If the component is defined in the same file, make sure its declaration is in that module and is not nested inside another function. If the component lives in another file, it must be exported from its defining module and imported into the module that renders it. The React documentation on importing and exporting components shows this as the standard way to move a component between files.
A component that is used but never imported is the most common cause. Add the import line at the top of the rendering file, and confirm the path is correct relative to the current file.
3. Match the export form with the import form
The export form determines the import form. A default export is imported without braces. A named export is imported with braces and the exact exported name. A default import can use any local name, but using the same name as the component makes debugging easier.
Default export, with a matching default import:
// Profile.js
export default function Profile() {
return <p>Profile</p>;
}
// App.js
import Profile from './Profile.js';
export default function App() {
return <Profile />;
}Named export, with a matching named import:
// Profile.js
export function Profile() {
return <p>Profile</p>;
}
// App.js
import { Profile } from './Profile.js';
export default function App() {
return <Profile />;
}If you import a default export with braces, or a named export without braces, the binding is not created under the name you use in JSX, and the same error appears.
4. Check the capitalization of the JSX tag
JSX uses capitalization to tell components from built-in HTML elements. Lowercase tags such as <div> refer to HTML elements, while a capitalized tag such as <Profile /> refers to a component. The React documentation on your first component states it directly: “React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!”
A lowercase <profile /> is therefore treated as an HTML element named profile, not as a reference to your function, so rename the function and the tag to start with a capital letter.
5. Check whether the declaration is in scope
If the name is spelled, exported, imported, and capitalized correctly, the declaration may exist but be hidden from the code that uses it. A variable declared inside a function can only be read inside that function, and let and const are block-scoped, so a declaration inside an if block or a callback is not visible outside that block.
This example fails because Card exists only inside makeCard:
Best Value
function makeCard() {
const Card = () => <div>Card</div>;
}
export default function App() {
return <Card />; // ReferenceError: Card is not defined
}Move the component definition to the top level of the module, where every component in the file can reach it:
function Card() {
return <div>Card</div>;
}
export default function App() {
return <Card />;
}If the component really must be chosen at runtime, pass it in as a prop, or pass the data it needs through props, rather than relying on a variable from another function to be visible.
6. Re-run in the development build and use the next error as the next clue
Make one targeted correction, reload, and read the first new error. Each fix either resolves the message or changes it, and the new message tells you which check to repeat. When you debug locally, use the development build of React, not a minified production bundle, because the development build keeps readable names and adds warnings. React’s minified error reference explains why production messages are hard to read; that page covers a different error, but its advice on the development build applies generally.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsCommon causes at a glance
| Cause | What to inspect | Repair |
|---|---|---|
| Misspelled identifier or leftover rename | JSX tag compared with the declaration and the import | Make the spelling and capitalization identical in all three places. |
| Component not imported | The defining file is different from the rendering file | Export the component from its file and import it where it is used, as shown in the React importing and exporting guide. |
| Default and named import mismatch | Whether the export is export default or export function |
Use an import without braces for a default export, and an import with braces and the same name for a named export. |
| Lowercase JSX tag | A tag such as <card /> that should refer to a component |
Capitalize the component name in the function and in the tag. |
| Declaration out of scope | Whether the component is declared inside another function or block | Move the declaration to a scope the JSX can reach, or pass the value through props. |
If the error still appears
- Confirm that the file you edited is the file the bundler or dev server loads. A duplicate file with the same name in another folder is a common reason an edit seems to have no effect.
- Check that the import path points to the exact file, including its extension when your setup requires one.
- Search the project for the component name to find every declaration, import, and JSX use, and confirm they agree.
- Remove unrelated code temporarily, leaving only the component and its import, to see whether the error belongs to that file or to a parent that renders it.
Work through the diagnostic path in order, and the message will usually point you to the single place where the name is missing or hidden.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
