Stop Getting React Error #130: My 3-Step 2025 Method

We’ve all been there. You’re deep in the zone, crafting a beautiful new React component. You save your file, the browser refreshes, and... BAM. A blank white screen and a cryptic message in the console: Uncaught Error: Invalid argument passed to `createElement`. Expected a string (for HTML tags) or a class/function (for composite components) but got: `undefined`.

This is React Error #130. It’s frustrating, it breaks your entire app, and it can feel like a real roadblock. But what if I told you that 99% of the time, this error is caused by one of three simple mistakes? After years of mentoring developers and untangling this exact issue, I’ve refined a simple, modern process to find and fix it in minutes. This is my 3-step 2025 method to make Error #130 a thing of the past.

First, What Exactly IS React Error #130?

Let's demystify the error message. At its core, React builds your user interface by creating "elements." When you write <div>, you're telling React to create a standard HTML element. When you write <MyComponent />, you're telling it to create a custom component element.

Error #130 happens when you ask React to create an element, but the thing you gave it is literally undefined. It’s like handing a chef an empty box and asking them to bake a cake with the ingredients inside. The chef (React) will stop and say, "I can't work with this! I expected flour, sugar, and eggs, but I got... nothing."

So, our mission is simple: find out why our component is undefined at the exact moment React tries to render it.

The 3-Step 2025 Method to Fix It

Forget randomly console-logging everywhere. This structured approach will guide you directly to the source of the problem.

Step 1: The Import/Export Audit

This is, by far, the most common culprit. A tiny mismatch between how you export a component and how you import it is all it takes to trigger this error. There are two main ways to export in JavaScript modules (ESM), and you must match them correctly.

Named Exports vs. Default Exports

A default export is used for the primary export of a file. You can only have one.

// components/UserProfile.jsx
const UserProfile = () => {
  return <div>User Profile</div>;
};

export default UserProfile; // <-- Default export

To import it, you use a bare import:

// App.js
import UserProfile from './components/UserProfile'; // <-- Correct!

function App() {
  return <UserProfile />;
}

A named export is used for exporting multiple values from a single file. You can have as many as you like.

// components/Buttons.jsx
export const PrimaryButton = () => {
  return <button className="primary">Click Me</button>;
};

export const SecondaryButton = () => {
  return <button className="secondary">Learn More</button>;
};

To import these, you must use curly braces { } with the exact name:

// App.js
import { PrimaryButton } from './components/Buttons'; // <-- Correct!

function App() {
  return <PrimaryButton />;
}

The Error Trap: The error happens when you mix them up. If you try to import a named export using the default import syntax, your variable PrimaryButton will be undefined.

// App.js - THE WRONG WAY
import PrimaryButton from './components/Buttons'; // <-- WRONG! This will be undefined

function App() {
  // React tries to render `undefined` here, causing Error #130
  return <PrimaryButton />;
}

Your Action: Go to the file where the error occurs. Look at the component that's failing. Check its import statement. Then, open the component's source file and verify how it's being exported. Is it `export default` or `export const`? Make them match!

Step 2: The Conditional Rendering Check

The second most common cause is logic that accidentally results in an undefined value being rendered. React is happy to render null, false, or an empty string (they all render nothing), but it draws the line at undefined.

A classic mistake involves the logical AND (&&) operator.

const UserDashboard = ({ messageCount }) => {
  // Let's say messageCount is 0
  return (
    <div>
      <h1>Welcome!</h1>
      {/* This is the problem line */}
      {messageCount && <NotificationBadge count={messageCount} />}
    </div>
  );
};

You might think, "If `messageCount` is 0, it's falsy, so it won't render the badge." You're half right. The expression messageCount && <Component /> doesn't evaluate to false; it evaluates to the first falsy value it finds. In this case, it evaluates to 0. React doesn't know how to render the number 0 as a component, but in some edge cases with other variables, this can resolve to undefined and crash.

A safer, more explicit way is to use a ternary operator or ensure your condition is a true boolean.

The Fix:

const UserDashboard = ({ messageCount }) => {
  return (
    <div>
      <h1>Welcome!</h1>

      {/* Method 1: Ternary Operator (Best) */}
      {messageCount > 0 ? <NotificationBadge count={messageCount} /> : null}

      {/* Method 2: Coerce to Boolean */}
      {Boolean(messageCount) && <NotificationBadge count={messageCount} />}
    </div>
  );
};

Your Action: Look at the component that's breaking. Is it wrapped in any conditional logic like {condition && <MyComponent />}? Log the `condition` right before the return statement. If it could ever be anything other than a boolean, `null`, or a valid component, refactor it to be more explicit, like the ternary operator example above.

Step 3: The HOC & Prop-Drilling Pitfall

This is a more advanced but equally frustrating scenario. Your component might be receiving another component as a prop, or it might be wrapped in a Higher-Order Component (HOC). If that prop or HOC incorrectly returns undefined, the error will pop up.

Consider a HOC that is supposed to prevent rendering if a user is not authenticated:

// hocs/withAuth.js
const withAuth = (WrappedComponent) => {
  return function(props) {
    const { isAuthenticated } = useAuth();

    if (!isAuthenticated) {
      // OOPS! We forgot to return anything here.
      // This function implicitly returns `undefined`.
      return;
    }

    return <WrappedComponent {...props} />;
  }
};

// components/SecretData.js
const SecretData = () => <div>Top Secret Info</div>;
export default withAuth(SecretData); // This will be `undefined` if not authenticated

When you try to render <SecretData /> while logged out, you're actually trying to render the undefined that withAuth returned.

The Fix: Ensure every code path in your HOC or component returns a renderable value. null is your best friend here.

// hocs/withAuth.js - FIXED
const withAuth = (WrappedComponent) => {
  return function(props) {
    const { isAuthenticated } = useAuth();

    if (!isAuthenticated) {
      return null; // Explicitly render nothing.
    }

    return <WrappedComponent {...props} />;
  }
};

Your Action: If your component is wrapped in a HOC (like `withAuth(MyComponent)` or using Redux's `connect`), investigate the HOC itself. Also, check if your component accepts another component as a prop (e.g., <Card icon={MyIcon} />). If so, trace where that prop (`MyIcon`) is coming from and ensure it's not `undefined`.

Common Causes at a Glance: A Comparison Table

Here’s a quick-reference table to help you diagnose the problem even faster.

Key Takeaways to End Error #130 for Good

Stop Fearing, Start Building

React Error #130 feels like a brick wall, but it's really just a signpost pointing to a logical gap in your code. By systematically applying this 3-step method—auditing your imports, checking your conditionals, and investigating wrappers—you can turn that wall into a stepping stone.

The next time you see it, don't panic. Take a breath, follow the steps, and you’ll find the fix in no time. You'll not only solve the problem faster but also build a deeper, more intuitive understanding of how React works under the hood. Happy coding!