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.
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.
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 devThe 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.tsxUpdate your imports accordingly:
// Update from
import MyComponent from "./MyComponent";
// To explicitly include extension if needed
import MyComponent from "./MyComponent.jsx";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:
// 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.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React