Hey there, let’s dig into this React Minified Error #130 you’re facing in production builds. I’ve wrestled with this exact issue a few times, so here’s what to check and fix step by step.

First, let’s decode that vague error: Minified React Error #130 means you’re trying to render an invalid component type. React expects a function component, class component, or valid React element, but instead it’s receiving something like undefined, null, a plain object, or a string. Dev mode has more forgiving checks and detailed warnings, but production compresses all that into this shorthand error code.

Given your scenario—dev works perfectly, rolling back versions doesn’t resolve it, even reinstalling dependencies didn’t help—here are the most likely culprits:

1. Import/Export Mismatches Exposed by Tree Shaking #

Production builds use aggressive tree shaking to strip unused code, which can reveal import/export mistakes that dev mode overlooks. Common examples:

• You exported a component with export default MyComponent but imported it with import { MyComponent } from './MyComponent' (using a named import for a default export)
• Or the reverse: you used export const MyComponent but imported with import MyComponent from './MyComponent' (default import for a named export)

Fix: Audit every component’s import/export pair, especially any you modified recently. Ensure default exports pair with default imports, and named exports pair with named imports.

2. Conditional Rendering Returning undefined #

If your conditional logic returns undefined instead of a valid React node, dev mode might let it slide, but production will throw this error. For example:

// Bad: returns undefined when user isn't logged in
const Profile = () => {
  if (user.isLoggedIn) {
    return <UserProfile />;
  }
  // No return statement here = undefined
};

// Or this problematic pattern:
const ComponentToRender = hasAccess ? <PremiumFeature /> : undefined;

Fix: Always return a valid React node (even an empty Fragment <></> or null) when conditionally rendering:

// Good
const Profile = () => {
  if (user.isLoggedIn) {
    return <UserProfile />;
  }
  return null;
};

// Or use an empty Fragment
const ComponentToRender = hasAccess ? <PremiumFeature /> : <></>;

3. Dynamic Import/Code Splitting Path Errors #

If you’re using React.lazy or dynamic import() for code splitting, production build paths might get corrupted—resulting in the component failing to load and becoming undefined. Common issues include typos in import paths or path aliases that work in dev but break in production.

Fix: Verify all dynamic import paths match your actual file structure. For example:

// Double-check the path matches your project's file hierarchy
const Checkout = React.lazy(() => import('./pages/Checkout'));

You can also temporarily disable code splitting to see if the error disappears—this would confirm this is the root cause.

4. Hidden Dependency Version Changes #

Even though you deleted node_modules and package-lock.json, your package.json might have loose version ranges (like ^1.2.3 or ~1.2.3) that pulled in a newer dependency version when you reinstalled. If that dependency changed its export structure, it could break your imports.

Fix: Lock your dependency versions to the exact ones that worked before. If you have a backup of your old package-lock.json, use it to get precise version numbers, then update your package.json to use fixed versions (no ^ or ~). For example, change "react": "^18.2.0" to "react": "18.2.0", then run npm install or yarn install again.

5. Get a Clearer Error with Unminified Builds #

To pinpoint exactly which component is causing the issue, temporarily disable minification in your production build. This will replace the vague #130 code with a detailed error message.

• For Create React App: Use a tool like craco to override build settings without ejecting, or eject and modify the webpack config to disable the TerserPlugin.
• For custom webpack setups: Comment out minification plugins or set optimization.minimize: false in your config.

A Quick War Story from My Work #

I once spent hours debugging this exact error—turns out I was importing a UI library component with a named import, but the component was actually a default export. Dev mode had a hidden fallback that allowed it, but production tree shaking stripped the invalid import, leaving me with undefined when trying to render it. Switching to a default import fixed it instantly.

内容的提问来源于stack exchange，提问作者J.n. Beckett