How to fix Error: Minified React error #130; visit https://react.dev/errors/130 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. in React

ReactINTERMEDIATEHIGHUpdated Oct 27, 2026· 393 views

React error #130 occurs when an invalid element type is passed to React - expecting a string for built-in components or a class/function for custom components, but receiving something else like undefined, an object, or null.

Quick fix

Fixes 130

# Instead of production build
npm run build
npm start

# Use development mode
npm run dev
  1. Switch to development build to see the full error message
  2. Check import/export statements for the failing component
  3. Verify the component is actually exported
  4. Add console.log to check if component is undefined
react — error
# Instead of production build
npm run build
npm start
# Use development mode
npm run dev
Error: Minified React error #130; visit https://react.dev/errors/130 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

What this error means

This error indicates that React encountered an invalid element type when trying to render a component. React expects element types to be one of three things: a string (for built-in HTML elements like "div" or "span"), a class component that extends React.Component, or a function component that returns JSX. Instead, React received something it cannot work with - typically undefined, null, an object, or some other non-component value. This error only appears in minified production builds of React. In development mode, you would see the full error message: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: [value]." The error most commonly stems from import/export mismatches, where a component is exported one way but imported another, resulting in undefined values being passed where React expects a valid component.

Typical symptoms

  • Application crashes with a blank white screen in production builds
  • Error message directs you to visit react.dev/errors/130 for details
  • Same code works perfectly in development mode but fails in production
  • Console shows "Minified React error #130" with no additional context
  • Error occurs immediately when trying to render a specific component
  • DevTools shows the component tree stops rendering at a specific point
  • Build process completes successfully but runtime crashes on component load

Common causes

  1. Importing a named export as a default export, or vice versa (e.g., using import MyComponent from "./file" when it is exported as export const MyComponent)
  2. Component variable is undefined because the import path is incorrect or the file does not export the expected component
  3. Exporting an object instead of a component function or class (e.g., export default { MyComponent } instead of export default MyComponent)
  4. Component is null or undefined due to conditional logic that fails in production but not in development
  5. Incorrect destructuring when importing components from a module (e.g., import { default } from "module" instead of import Component from "module")
  6. Passing a non-component value directly in JSX (e.g., <{someObject} /> instead of <SomeComponent />)
  7. Class component with nested static or private methods that call setState being mangled during minification
  8. Circular dependency causing a component to be undefined at the time it is referenced

How to fix "Error: Minified React error #130; visit https://react.dev/errors/130 for the full message or use the non-minified dev environment for full errors and additional helpful warnings."

1Switch to development build to see the full error message

The minified error is intentionally vague to reduce bundle size. Run your application in development mode to see the complete error message with the actual invalid value.

Change your build command temporarily:

bash
# Instead of production build
npm run build
npm start

# Use development mode
npm run dev

The development error will show exactly what invalid value React received, making it much easier to diagnose the problem.

2Check import/export statements for the failing component

Verify that your imports match your exports. This is the most common cause of error #130.

If the component is exported as a named export:

javascript
// file.js
export function MyComponent() {
  return <div>Hello</div>;
}

// Correct import
import { MyComponent } from "./file";

// ❌ Wrong - will be undefined
import MyComponent from "./file";

If the component is exported as a default export:

javascript
// file.js
export default function MyComponent() {
  return <div>Hello</div>;
}

// Correct import
import MyComponent from "./file";

// ❌ Wrong - will be undefined
import { MyComponent } from "./file";

Use your editor's "Go to Definition" feature to verify the import resolves correctly.

3Verify the component is actually exported

Open the file containing the component and ensure it has a proper export statement.

Common mistakes:

javascript
// ❌ Wrong - no export
function MyComponent() {
  return <div>Hello</div>;
}

// ✅ Correct - default export
export default function MyComponent() {
  return <div>Hello</div>;
}

// ✅ Correct - named export
export function MyComponent() {
  return <div>Hello</div>;
}

// ❌ Wrong - exporting an object instead of the component
export default {
  MyComponent
};

If using TypeScript, also check that the file extension matches (.tsx for JSX components).

4Add console.log to check if component is undefined

Before using the component in JSX, log it to verify it is not undefined:

javascript
import MyComponent from "./MyComponent";

console.log("MyComponent:", MyComponent);
// Should log: MyComponent: function MyComponent() {...}
// If undefined or {}: you have an import/export mismatch

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

If the console shows undefined, the import failed. If it shows an object like { MyComponent: function }, you imported a module instead of the component itself.

5Check for circular dependencies

Circular dependencies can cause components to be undefined when they are first imported. Use a tool like madge to detect cycles:

bash
npm install --save-dev madge
npx madge --circular --extensions js,jsx,ts,tsx src/

If circular dependencies are found, refactor by:
- Moving shared code to a separate file
- Using dependency injection patterns
- Restructuring component hierarchy to eliminate the cycle

6Inspect the production build bundle

If the error only occurs in production, the minification process may be causing issues. Check your bundler configuration:

For webpack, ensure you are not mangling React component names:

javascript
// webpack.config.js
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_classnames: true,
          keep_fnames: true,
        },
      }),
    ],
  },
};

For Vite, check vite.config.js for aggressive minification settings.

For Next.js, this is usually handled automatically, but verify you are not overriding default minification settings.

7Ensure all component files have valid JSX/TSX extensions

If you are using JSX in a .js file without proper configuration, the component may not be recognized:

bash
# Rename files with JSX content
mv src/MyComponent.js src/MyComponent.jsx
# or for TypeScript
mv src/MyComponent.ts src/MyComponent.tsx

Update your imports accordingly:

javascript
// Update from
import MyComponent from "./MyComponent";

// To explicitly include extension if needed
import MyComponent from "./MyComponent.jsx";

Advanced notes

In TypeScript class components, a specific edge case can trigger error #130: nested static or private methods that invoke setState may be incorrectly mangled during production minification, causing React to receive an invalid component type. If you encounter this issue after verifying imports/exports, try extracting nested components into separate, properly-scoped functions outside the class definition.

For large codebases with barrel exports (index.js files that re-export many components), ensure you are not accidentally exporting undefined values. Use named exports explicitly rather than export * from "./file" to maintain clarity.

When using code-splitting with React.lazy(), verify that the dynamic import() statement returns a module with a default export. If using named exports with lazy loading, wrap them appropriately:

javascript
// If MyComponent is a named export
const MyComponent = React.lazy(() =>
  import("./MyComponent").then(module => ({ default: module.MyComponent }))
);

Some bundlers (particularly older versions of webpack) may have issues with certain export patterns. If you encounter this error after upgrading React, also check that your build tools are up to date and compatible with your React version.

Frequently asked questions

What does "130" mean?
This error indicates that React encountered an invalid element type when trying to render a component. Component, or a function component that returns JSX. Instead, React received something it cannot work with - typically undefined, null, an object, or some other non-component value.
How do I fix "130"?
React error #130 occurs when an invalid element type is passed to React - expecting a string for built-in components or a class/function for custom components, but receiving something else like undefined, an object, or null.
What causes "130"?
Importing a named export as a default export, or vice versa (e.g., using import MyComponent from "./file" when it is exported as export const MyComponent) Component variable is undefined because the import path is incorrect or the file does not export the expected component Exporting an object instead of a component function or class (e.g., export default { MyComponent } instead of export default MyComponent)
Is the "130" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading