facebook/react · error · Error

130

130

Error message

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: ${type == null ? type : typeof type}.${info}

What it means

Fizz hit an element whose type is neither a string (host component), a function/class (composite component), nor a symbol-tagged object (memo/forwardRef/lazy/context). Most often the type is undefined because of an import mistake; the info suffix in the message calls out the default/named import mixup case. Error code 130.

Source

Thrown at packages/react-server/src/ReactFizzServer.js:3183

  }

  let info = '';
  if (__DEV__) {
    if (
      type === undefined ||
      (typeof type === 'object' &&
        // $FlowFixMe[invalid-compare]
        type !== null &&
        Object.keys(type).length === 0)
    ) {
      info +=
        ' You likely forgot to export your component from the file ' +
        "it's defined in, or you might have mixed up default and " +
        'named imports.';
    }
  }

  throw new Error(
    'Element type is invalid: expected a string (for built-in ' +
      'components) or a class/function (for composite components) ' +
      `but got: ${type == null ? type : typeof type}.${info}`,
  );
}

function resumeNode(
  request: Request,
  task: ReplayTask,
  segmentId: number,
  node: ReactNodeList,
  childIndex: number,
): void {
  const prevReplay = task.replay;
  const blockedBoundary = task.blockedBoundary;
  const resumedSegment = createPendingSegment(
    request,
    0,

View on GitHub (pinned to eafeac097b)

Solutions

1. Check the import style against the module's actual export (default vs named)
2. Break circular imports by moving the shared component into its own module
3. Assert component maps are valid element types in dev before SSR (react-is isValidElementType)

Example fix

// before
import Button from './Button'; // module exports named { Button }
return <Button />; // Button is undefined -> throws

// after
import {Button} from './Button';
return <Button />;

import {isValidElementType} from 'react-is';

for (const [name, Component] of Object.entries(routes)) {
  if (!isValidElementType(Component)) {
    throw new Error(`Route component '${name}' did not import correctly`);
  }
}

import {isValidElementType} from 'react-is';

if (isValidElementType(Component)) {
  element = <Component />; // narrowed to a renderable type
}

When it happens

Trigger: Rendering <Foo/> where Foo is undefined: default vs named import mismatch, missing export, a circular import evaluating to undefined at SSR time, or passing an arbitrary object/number as the element type.

Common situations: Refactors that rename exports; barrel-file import cycles; CJS/ESM interop differences between Node and the bundler; SSR rendering a library entry that conditionally exports.

Related errors

• File/Blob fields are not yet supported in progressive forms.
• Can only set one of `children` or `props.dangerouslySetInner
• `props.dangerouslySetInnerHTML` must be in the form `{__html
• input is a self-closing tag and must neither have `children`
• `dangerouslySetInnerHTML` does not make sense on <textarea>.

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/1d6daea9e3b34db0. Report an issue: GitHub.