Minified React Error #130 (tested)

Minified React error #130 decodes to Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. React's production build strips full error text to save bytes and replaces it with a numeric code plus a link to react.dev/errors/130. We reproduced the underlying bug for real: a component imported the wrong way, so JSX receives undefined instead of a function or class.

1. What error #130 actually says

In development, React throws the full message. In a production build, React's minifier replaces that long string with Minified React error #130; visit https://react.dev/errors/130?args[]=undefined&args[]= for the full message. Decoded, per react.dev/errors/130, the full text is:

Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.

"Got: undefined" is the key part. JSX compiles <Foo /> to React.createElement(Foo, ...). If the variable Foo is undefined at that point, rather than a tag string, a class, or a function, React cannot render it and throws this error the moment it tries.

2. We reproduced it: default import of a named-only export

The single most common cause is a mismatched import/export pair. We wrote a component file with only a named export:

// Foo.cjs
function Foo() { return 'I am Foo'; }
module.exports = { Foo };   // no `default` export

Then a consumer that (as a bundler like webpack/Babel compiles a default import down to) reads .default off the required module:

const FooModule = require('./Foo.cjs');
const Foo = FooModule.default;   // undefined: Foo.cjs never set `.default`

console.log(typeof Foo, Foo);    // undefined undefined

const el = React.createElement(Foo, {});
ReactDOMServer.renderToString(el);

Running this with NODE_ENV=development, React threw, verbatim, on our box:

Warning: React.createElement: type is invalid -- expected a string (for
built-in components) or a class/function (for composite components) but
got: undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.

Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.

That matches the react.dev/errors/130 decoded text exactly (React's dev build adds one extra helper sentence; the minified production build drops it). To confirm the numeric mapping is real and not just a docs claim, we grepped our own installed node_modules/react-dom/cjs/react-dom.production.min.js and found the literal minified throw site:

throw Error(p(130,null==a?a:typeof a,""));

p(130, ...) is React's production error-code formatter — the same function that builds the "visit react.dev/errors/130" message, with the actual typeof of the bad value spliced into the URL's args[] query parameters.

3. The three ways this mismatch happens

Cause	Example	Why it's undefined
Default import of a named-only export	`import Foo from './Foo'` but `Foo.js` only has `export function Foo(){}`	There is no default to import; the binding resolves to undefined under CommonJS/bundler interop (native ESM instead throws a hard `SyntaxError` at import time, which is easier to catch).
Named import of a default-only export	`import { Foo } from './Foo'` but `Foo.js` only has `export default function Foo(){}`	There is no named export called `Foo`, same undefined-binding result.
Circular import	`A.js` imports from `B.js` which imports back from `A.js`	Whichever module is still mid-evaluation hands back an incomplete (often empty/undefined) exports object to the other side.
Forgot to export at all	Defined `function Foo(){}` in the file but never wrote an `export` line	The import has nothing to bind to; most bundlers resolve this to undefined rather than a build error.

4. How to fix it

Log it before rendering. console.log(Foo) right above the JSX that uses it. undefined confirms the import, not your component's internal logic, is the bug.
Check the export line in the source file, not the import line. Does it say export default or export function Foo / export const Foo? Match the import style to that exactly.
Grep for the component name across the file to make sure some other refactor didn't delete the export line while keeping the import.
Break circular imports. Move the shared piece both files need into a third file, or import type-only where possible, so neither module needs the other's live value during its own evaluation.
Read the dev message's hint. React's own dev-mode text literally says "You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports" — that covers the great majority of real cases, as it did in our repro.

If the undefined component only shows up after server-side rendering, specifically on the client after hydration, see React hydration error (Next.js) instead — that is error #418, a different check (section 6 below).

5. Decode any minified React error yourself

Every minified React error has the same shape: Minified React error #<code>; visit https://react.dev/errors/<code>?args[]=... for the full message. Open that exact URL (not just the react.dev homepage) — it fills in your specific args[] values into the real sentence. You don't need source maps or to switch to a development build just to read the message, though a dev build gives you the full in-context warning plus a component stack trace, which the production message does not include.

6. Other common minified codes: #310 and #418

These are not reproduced hands-on in this guide (no hook-render-count bug or SSR mismatch was built), but per their official decoder pages:

React error #310: "Rendered more hooks than during the previous render." Per the react.dev decoder, this fires when a component calls a different number of useState/useEffect/etc. hooks on one render than it did on the previous one — almost always a hook called conditionally (inside an if, loop, or after an early return) instead of unconditionally at the top of the component. See React error #310: rendered more hooks than previous render for the dedicated, measured guide to that one.
React error #418: "Hydration failed because the server rendered <x> didn't match the client." Per the react.dev decoder, this is a server/client markup mismatch during hydration — typically caused by reading typeof window, Date.now(), Math.random(), locale-dependent formatting, or browser extensions injecting DOM before React hydrates. See React hydration error (Next.js) for the dedicated, measured guide to that one.

Frequently asked questions

What does Minified React error #130 mean?

Per react.dev/errors/130: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined." A variable you're rendering with JSX is undefined instead of a component. We reproduced this exact text from a default-import-of-a-named-export mistake.

Why does React show a number instead of the real error?

Production builds strip long error strings to cut bundle size. React replaces them with `Minified React error #<code>` plus a link to react.dev/errors/<code>, which fills in your specific values. We confirmed the code-to-message mapping by grepping our installed react-dom production.min.js and finding the literal `Error(p(130,...))` call site.

I imported the component and it exists in the file, why is it still undefined?

Check whether the export is `export default` or a named `export`. A default import (`import Foo from './Foo'`) only works if the file has `export default`; a named import (`import { Foo } from './Foo'`) only works if the file has `export function Foo` / `export const Foo`. Mixing the two gives undefined, which is exactly what we reproduced.

What's the difference between error #130, #310, and #418?

#130 (this guide, reproduced): a component reference is undefined when JSX tries to render it, usually an import/export mismatch. #310 (per react.dev/errors/310, not reproduced here): a component called a different number of hooks than on its previous render, usually a conditional hook call. #418 (per react.dev/errors/418, not reproduced here): server-rendered HTML didn't match what the client produced during hydration.

Can a circular import cause error #130?

Yes. If module A imports from module B and B imports back from A, whichever module is still being evaluated when the cycle closes can hand the other side an incomplete exports object, which often means the component you needed is still undefined at that point. Breaking the cycle (move the shared code to a third file) fixes it.

Written with AI assistance. Measured on 2026-10-03 with Node.js 24.21.0, React 18.3.1 and react-dom 18.3.1 (npm install in a scratch dir). We reproduced the full development-mode error by requiring a component as a default import from a module that only has a named export. We also grepped the installed react-dom production.min.js source and found the literal minified call site `throw Error(p(130,null==a?a:typeof a,""))`, confirming code 130 maps to this exact check. The canonical decoded text and the #310 and #418 texts are from the official decoder pages react.dev/errors/130, react.dev/errors/310 and react.dev/errors/418 (not independently reproduced for 310/418, see FAQ). PlainHeaders is our extension; Node.js and npm are free.