Fix React Component Is Not Defined Error

This guide walks you through the most common causes of the “Component is not defined” error in React and shows you exactly how to fix each one. You’ll learn to spot the difference between a missing import, a typo, a circular dependency, and a misuse of components, so you can resolve the error quickly and get back to building.

What You’ll Need

• A React project (Create React App, Vite, Next.js, or any setup) where the error occurs.
• A code editor (VS Code, Sublime, etc.) with the file where the error appears open.
• Basic familiarity with JavaScript/ES6 module syntax (import/export).

Step-by-Step

1. Read the full error message. In the browser console (or terminal if using SSR), the error usually includes the component name, e.g., ReferenceError: MyComponent is not defined. Note the exact name and the file/line number mentioned.
2. Open the file where the error occurs. Navigate to the file and line number indicated. Look for where you use the component in your JSX, like <MyComponent />.
3. Check if the component is imported. Scroll to the top of the file. Look for an import statement that brings in the component. For a default export, it should look like import MyComponent from './MyComponent'. For a named export, import { MyComponent } from './MyComponent'. If it’s missing, add it.
4. Verify the import path is correct. The path must match the file location exactly, including the file name (case-sensitive) and extension (if you’re not using a bundler that resolves extensions automatically). For example, if the component file is src/components/MyComponent.jsx, the import should be import MyComponent from './components/MyComponent' (or with the .jsx extension if your setup requires it).
5. Check the export in the component file. Open the component file itself. Confirm that it actually exports the component. If it’s a function component, you might have export default function MyComponent() { ... } or export function MyComponent() { ... }. If there’s no export, add one. If it exports a different name (e.g., export default MyComp), you need to import that name.
6. Look for typos in the component name. JavaScript is case-sensitive. mycomponent is not the same as MyComponent. Compare the import statement, the usage in JSX, and the export declaration. They must all match exactly.
7. Check for circular dependencies. If Component A imports Component B, and Component B also imports Component A, you can get a “not defined” error because one of them is referenced before it’s initialized. To fix, refactor to remove the cycle: move shared logic to a third file, or use lazy loading (React.lazy) for one of them.
8. Ensure you’re not using the component before it’s defined. In the same file, if you define a component with const MyComponent = () => {} and then use it in JSX before that line, you’ll get a “not defined” error because of hoisting (const and let are not hoisted like function declarations). Move the usage below the definition, or convert to a function declaration (function MyComponent() {}) which is hoisted.
9. Restart your dev server. Sometimes the bundler (Webpack, Vite) caches modules. After making changes, restart the server (Ctrl+C then npm start or similar) to clear the cache.
10. If using TypeScript, check types. If you’re using TypeScript, you might have a type-only import that doesn’t bring in the runtime value. Use import type { MyComponent } only when you need the type, but for a component you need a regular import.

Common Mistakes

• Forgetting to import the component – the most frequent cause. Always check the top of the file.
• Incorrect import/export syntax – mixing default and named imports. If the component is exported as default, you must import it without braces. If it’s a named export, you must use braces.
• Case sensitivity – using mycomponent instead of MyComponent.
• Wrong file extension – importing ./MyComponent when the file is MyComponent.jsx and your bundler doesn’t resolve .jsx automatically (rare, but happens in some setups).
• Using a component before its declaration in the same file (especially with arrow functions).

Tips

• Use an IDE with auto-import (VS Code does this). When you type a component name, it suggests the import. Accepting it avoids typos and path errors.
• Keep component files in a consistent folder structure (e.g., src/components/) and use relative paths carefully.
• Use the ESLint plugin eslint-plugin-react which can warn about missing imports or undefined components.
• If you’re using a barrel file (index.js that re-exports), make sure the barrel file itself exports the component correctly.
• When using React Fast Refresh (Create React App, Vite), sometimes a full reload is needed after adding a new export. Press Ctrl+Shift+R to hard refresh the browser.

Troubleshooting

If the error persists after checking the above, try these additional steps:

• Clear the browser cache and hard reload. Sometimes the browser serves a stale bundle.
• Delete the node_modules folder and reinstall dependencies. Run rm -rf node_modules (or rimraf node_modules on Windows) then npm install. This fixes corrupted packages.
• Check for multiple versions of React. If you have both React and ReactDOM installed at different versions, components might not be recognized. Run npm ls react to see the tree. If there are duplicates, use npm dedupe or reinstall.
• If using Next.js, check for client/server component issues. In Next.js App Router, if you’re using a client component in a server component without the “use client” directive, you might get a similar error. Add “use client” at the top of the component file.
• Look for a variable shadowing. If you have a local variable with the same name as the component, it can shadow the imported one. Rename the local variable.
• If the error occurs in a test file, ensure you’re mocking the component correctly if needed, and that the test imports the component properly.

Frequently Asked Questions

Why does the error say “Component is not defined” even though I imported it?

This usually happens when the import path is wrong, the export name doesn’t match, or there’s a circular dependency. Double-check the file path and the export statement in the component file.

Can this error be caused by a typo in the component name?

Yes, JavaScript is case-sensitive. MyComponent and mycomponent are different. Check the import, the usage, and the export for exact matches.

What is a circular dependency and how do I fix it?

A circular dependency occurs when two modules import each other. This can cause one to be undefined at runtime. To fix, refactor to move shared code into a third module, or use lazy loading.

Does this error happen with function components only?

No, it can happen with class components too. The same import/export rules apply.

Why does the error appear only in production build, not in development?

This can happen due to minification or tree-shaking. Sometimes a component is not exported correctly, so the production bundler removes it. Check your exports and ensure you’re not using a conditional export that might be stripped.

How do I fix “Component is not defined” in React Native?

The same principles apply. Check imports, exports, and file paths. In React Native, ensure you’re using the correct extension (.js or .jsx) and that the bundler (Metro) is restarted after adding new files.

Related

• iQOO Z11x vs OnePlus N6x 5G: Which Fits Your Priorities?
• OnePlus 13s vs vivo X200t: Which Fits You?
• How to Check Your WordPress Site’s PHP Version