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

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:

# 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.

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:

// 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:

// 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.

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

Common mistakes:

// ❌ 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).

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

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.

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

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

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:

// 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.

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

# 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:

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

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