This error occurs when trying to access React.PropTypes, which was moved to a separate package in React 15.5. PropTypes must now be imported from the standalone "prop-types" package instead of the React namespace.
This error appears when code attempts to access `React.PropTypes`, which is no longer available in the React package. Starting with React v15.5.0 (released in 2017), the PropTypes functionality was extracted into a separate `prop-types` package to reduce the size of the core React library and encourage migration to TypeScript and other type-checking solutions. In modern React (especially React 19+), PropTypes have been further de-emphasized as the community has largely moved to TypeScript for type checking. However, the separate `prop-types` package is still maintained for projects that need runtime prop validation. This error typically occurs in older codebases that haven't been updated to use the new import pattern, or when developers follow outdated tutorials that reference the old `React.PropTypes` API.
First, add the separate prop-types package to your project:
npm install prop-typesOr if using Yarn:
yarn add prop-typesThis package contains all the PropTypes functionality that was previously part of React core.
Change your imports from using React.PropTypes to importing from the separate package:
Before (old way):
import React from 'react';
MyComponent.propTypes = {
name: React.PropTypes.string,
age: React.PropTypes.number
};After (correct way):
import React from 'react';
import PropTypes from 'prop-types';
MyComponent.propTypes = {
name: PropTypes.string,
age: PropTypes.number
};You can also use named imports for cleaner code:
import { string, number, shape } from 'prop-types';
MyComponent.propTypes = {
name: string,
age: number,
address: shape({
street: string,
city: string
})
};If you have many files using the old syntax, use find-and-replace to update them all:
Search for: React.PropTypes
Replace with: PropTypes
Then add import PropTypes from 'prop-types'; to each file that uses PropTypes.
For automated migration, React provides a codemod tool:
npx react-codemod React-PropTypes-to-prop-types <path-to-source>This will automatically convert your code to use the new import pattern.
After updating your imports, verify that PropTypes validation is still working:
import PropTypes from 'prop-types';
function UserCard({ name, age, email }) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Email: {email}</p>
</div>
);
}
UserCard.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
email: PropTypes.string
};
export default UserCard;Test by passing invalid props in development mode - you should see console warnings if props don't match the defined types.
React 19 Changes: React 19 removes propTypes and defaultProps support for function components entirely. If you're using React 19+, consider migrating to TypeScript or another static type-checking solution instead of runtime PropTypes validation.
TypeScript Migration: For modern React projects, TypeScript is the recommended approach for type safety:
interface UserCardProps {
name: string;
age: number;
email?: string;
}
function UserCard({ name, age, email }: UserCardProps) {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
{email && <p>Email: {email}</p>}
</div>
);
}TypeScript provides compile-time type checking, better IDE support, and doesn't add runtime overhead like PropTypes does.
Performance Considerations: PropTypes validation only runs in development mode and is stripped out in production builds (when using proper build tools). However, the prop-types package still needs to be bundled, adding a small amount to your bundle size (~7KB minified).
Class Components: PropTypes still work with class components in React 19, but are removed for function components. If you must use PropTypes with function components in React 19+, you'll need to convert them to class components or use an older React version.
Codemod Tools: React provides several codemods to help with migrations:
- React-PropTypes-to-prop-types: Converts React.PropTypes to the separate package
- types-react-codemod: Helps with React 19 migration including PropTypes removal
Run with: npx types-react-codemod@latest preset-19 ./src
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite