The Ultimate 2025 Guide: 5 Fixes for React Error #130

// components/Card.js - Using a named export
export const Card = () => {
  return <div>This is a card.</div>;
};

// App.js - The WRONG way to import
import Card from './components/Card'; // This makes 'Card' undefined

function App() {
  return <Card />; // Error #130!
}

// App.js - The RIGHT way to import
import { Card } from './components/Card'; // Note the curly braces {}

function App() {
  return <Card />; // Works perfectly!
}

The Mistake: Trying to import a default export as if it were named.

// components/Button.js - Using a default export
const Button = () => {
  return <button>Click Me</button>;
};
export default Button;

// App.js - The WRONG way to import
import { Button } from './components/Button'; // 'Button' is undefined inside {}

function App() {
  return <Button />; // Error #130!
}

The Fix: Import without curly braces.

// App.js - The RIGHT way to import
import MyCustomButton from './components/Button'; // You can name it anything

function App() {
  return <MyCustomButton />; // Works perfectly!
}

Pro Tip: Always double-check your file paths for typos! Importing from './component/Button' instead of './components/Button' will also result in an undefined import.

Fix #2: Untangling Circular Dependencies

This one is more subtle. A circular dependency occurs when two or more modules depend on each other. For example, ComponentA imports ComponentB, and ComponentB imports ComponentA.

When a bundler like Webpack or Vite encounters this, one of the imports can fail to resolve, resulting in it being undefined when the code executes.

// components/UserProfile.js
import { UserAvatar } from './UserAvatar';

export const UserProfile = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <UserAvatar user={user} />
    </div>
  );
};

// components/UserAvatar.js
import { UserProfile } from './UserProfile'; // <-- Circular dependency!

export const UserAvatar = ({ user }) => {
  // This is a contrived example, but illustrates the circular pattern
  if (!user.avatarUrl) {
    return <UserProfile user={...someDefaultUser} />; // Problem!
  }
  return <img src={user.avatarUrl} alt={user.name} />;
};

The Fix: Refactor your code to break the cycle. The best way is often to extract the shared logic or component into a third, neutral file.

In our example, the logic is flawed, but a real-world fix might involve creating a new component, say GenericProfile, that both UserProfile and UserAvatar could import without importing each other.

Fix #3: Conditional Rendering Gone Wrong

This error catches many developers off guard. You might know that React can render booleans, null, or undefined as children (it simply renders nothing). However, this does not apply to the component type itself.

The Mistake: Using a logical AND (&&) to assign a component to a variable, which can result in the variable being false.

const AdminDashboard = () => <div>Welcome, Admin!</div>;

const App = ({ user }) => {
  // If user.isAdmin is false, ComponentToRender will be `false`
  const ComponentToRender = user.isAdmin && AdminDashboard;

  // This is equivalent to trying to render <false />, which is invalid.
  return <ComponentToRender />; // Error #130!
};

The Fix: Use a ternary operator or place the logical AND directly inside your JSX. This ensures you are conditionally rendering an element, not defining an invalid component type.

// Fix 1: Ternary Operator
const App = ({ user }) => {
  return user.isAdmin ? <AdminDashboard /> : null;
};

// Fix 2: Logical AND inside JSX
const App = ({ user }) => {
  return <div>{user.isAdmin && <AdminDashboard />}</div>;
};

Fix #4: Rendering Non-Component Values

Sometimes the error occurs because you're accidentally trying to render a value that isn't a component at all. A common case is with CSS Modules.

The Mistake: Rendering the imported styles object.

import styles from './MyComponent.module.css';

const MyComponent = () => {
  // 'styles' is an object like { container: 'MyComponent_container__abc12' }
  // You can't render an object!
  return <styles.container />; // Error #130!
};

The Fix: The styles object is meant to be used for the className prop, not as a component itself.

import styles from './MyComponent.module.css';

const MyComponent = () => {
  return <div className={styles.container}>Hello World</div>; // Correct!
};

This can also happen if you try to render a utility function that returns JSX, instead of calling it.

Fix #5: Verifying HOCs and Third-Party Libraries

While modern React (as of 2025) heavily favors Hooks, Higher-Order Components (HOCs) are still present in many codebases. A HOC is a function that takes a component and returns a new, enhanced component. If you misconfigure the HOC, it might return undefined.

The Mistake: Exporting the original component instead of the one returned by the HOC.

import { withRouter } from 'react-router'; // Old react-router example

const MyComponent = ({ location }) => {
  return <div>Current path: {location.pathname}</div>;
};

// WRONG: This applies the HOC but doesn't do anything with the result.
withRouter(MyComponent);

// You're exporting the original component, which doesn't have the 'location' prop.
export default MyComponent; // This can lead to related errors or Error #130 if the import is then confused.

// A direct cause of error #130 would be if the HOC itself failed and returned undefined.

The Fix: Ensure you are exporting the value returned by the HOC.

import { withRouter } from 'react-router';

const MyComponent = ({ location }) => {
  return <div>Current path: {location.pathname}</div>;
};

// RIGHT: Export the new component created by the HOC.
export default withRouter(MyComponent);

Also, be mindful of major version changes in libraries. A component or function you were importing might have been renamed, moved, or removed. For instance, moving from React Router v5 to v6 involved a complete shift from HOCs like withRouter to hooks like useLocation. Always check the official documentation after upgrading a library.

Conclusion

React Error #130 is a rite of passage for many developers. While it looks intimidating, it almost always boils down to a simple problem in your component tree. By methodically checking your imports/exports, looking for circular dependencies, verifying your conditional logic, and ensuring you're exporting the correct components from HOCs, you can squash this bug quickly.

Happy coding!