The message ComponentName is not defined, usually shown as ReferenceError: ComponentName is not defined, means JavaScript tried to read an identifier that has no binding in the scope where that code runs. React does not invent this error. When JSX such as <ComponentName /> is compiled, it becomes a reference to a variable named ComponentName, and if the file cannot see that variable, the engine throws a ReferenceError. In most cases the fix is one of four things: the name is misspelled, the component is not imported, the import syntax does not match the export, or the declaration exists somewhere the rendering code cannot reach.
Start with the exact identifier in the error
Open the browser console or the terminal output and copy the name before the words “is not defined.” That string is the only identifier the engine is complaining about. Compare it character by character with the JSX tag that renders it and with the declaration or import that should provide it. A single letter difference, a singular and plural mismatch, or a component that was renamed in one file but not the other will each produce this exact message.
Per MDN’s guide to this error, a ReferenceError of this kind is raised when code refers to a variable that does not exist, or to one that is not accessible from where the reference happens. The message tells you the name; the rest of the diagnosis is about why the name is not visible at that point.
Diagnostic path, in order
Work through these checks in sequence. Each one rules out a category of cause, and the first check that fails is usually the fix.
#1 Best Overall
1. Confirm the spelling and capitalization in both places
Search the project for the identifier and compare the declaration (or the import line) with the JSX tag. Profile, profile, and Profiles are three different names. Use your editor’s find feature with case sensitivity turned on to catch mismatches.
2. Decide whether the component lives in the same file or another module
If the component is declared in the same file, make sure the declaration is at the module’s top level or in a scope that encloses the JSX. If it lives in another file, it must be exported there and imported where it is rendered. React’s documentation demonstrates this exact pattern of moving a component to its own file, exporting it, and importing it into the file that uses it. See React’s guide to importing and exporting components.
3. Match the import syntax to the export syntax
The export form in the defining file determines the import form in the rendering file. The mismatch is a common reason a correctly named component still appears as undefined.
| Export in the defining file | Import in the rendering file | Notes |
|---|---|---|
export default function Profile() { … } |
import Profile from './Profile.js'; |
No braces. The local name can differ from the function name, but matching it makes debugging easier. |
export function Profile() { … } |
import { Profile } from './Profile.js'; |
Braces are required. The name inside the braces must match the exported name exactly. |
A complete default-export pair looks like this:
// Profile.js
export default function Profile() {
return <p>Profile</p>;
}
// App.js
import Profile from './Profile.js';
export default function App() {
return <Profile />;
}If the same file used export function Profile(), the import in App.js would have to be import { Profile } from './Profile.js';. Mixing the two forms is the most frequent cause of this error when the spelling looks correct.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 114. Check JSX capitalization
React treats JSX tags differently depending on case. The React Learn guide on your first component states the rule directly: “React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!” A capitalized tag such as <Profile /> refers to a binding named Profile. A lowercase tag such as <profile /> is treated as a built-in HTML element, so it does not look up a variable at all. That means a lowercase tag usually produces no ReferenceError; the component simply never renders, and the page shows an unrecognized element instead. Keep component names capitalized in both the declaration and the tag. (Source: React — Your First Component.)
5. Look for a declaration that is out of scope
If spelling, export, import, and capitalization are all correct, the binding may be declared inside another function or block. Variables declared with let and const are block-scoped, and a local function’s variables cannot be read from outside that function. MDN’s JavaScript reference documents this lexical scoping behavior. A component defined inside another component is a common trigger:
function Header() {
const Logo = () => <img src="logo.svg" alt="" />;
return <div><Logo /></div>;
}
function Page() {
return <Logo />; // ReferenceError: Logo is not defined
}The fix is to move Logo to the module’s top level, export it if another file needs it, and import it where it is used. If the same markup is needed in several places, a separate module is the cleanest home for it. Passing a value through props is the right tool for data, but a component that is simply missing from scope should be declared where it can be reached.
MDN’s ReferenceError page is the primary reference for the error itself: ReferenceError: “x” is not defined.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Best Value
6. Re-run in a development build and follow the next error
Fix one suspected cause at a time, then reload. The first error that changes is your next clue. For local debugging, use the development build of React rather than the production bundle, because it includes additional debug information and warnings. React’s error reference page describes this for its minified production errors; that page covers a different minified error, so treat it as general guidance rather than a diagnosis of this message: React — Minified React error #252.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Quick reference: symptom, likely cause, and where to look
| What you see | Most likely cause | Step to follow |
|---|---|---|
ComponentName is not defined with a name that differs from a declaration by case or letters |
Misspelling or inconsistent capitalization | Step 1 |
| Same error for a component defined in another file | Missing export or missing import | Step 2 |
| Same error after the export and import both look right | Default and named import syntax swapped | Step 3 |
Component does not appear, and no ReferenceError is shown |
Lowercase JSX tag rendering as an HTML element | Step 4 |
| Same error for a component declared inside another function or block | Declaration out of scope | Step 5 |
What this error does not tell you
The error names the missing identifier but not the file that should have provided it, so the search has to be manual. Public documentation from React and MDN establishes the causes and the fixes described above; it does not provide a measured frequency for this error, so it is not possible to say how often each cause occurs in real projects. The diagnostic order above follows the code path from name, to module boundary, to scope, which is the sequence that narrows down the cause most quickly.
The steps here apply to standard React and JavaScript module syntax. Build tools and frameworks can add their own import resolution rules, so if a correct-looking import still fails, check your framework’s documentation for its module resolution behavior alongside the official React guides.
Once the identifier is visible in the file that renders it, the error disappears. If a different error appears next, it has its own cause and should be diagnosed from its own message.
Also check whether the spelling in the error matches the spelling in your import, because a renamed component is easy to miss when the rename happened in another file.
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.
