React v16+使用独立PropTypes仍报TypeError问题求助

Hey there, let's work through this PropTypes error you're hitting—even after upgrading React and installing the standalone prop-types package, it's super frustrating when the browser still throws that error! Here are the most common fixes to check step by step:

• Update your import statements (the #1 fix)
  Chances are you're still trying to pull PropTypes from React itself, which stopped being supported in React 16.

  • ❌ Old, broken code:

    import React from 'react';
    const MyComponent = () => <div />;
    MyComponent.propTypes = {
      name: React.PropTypes.string
    };
    

  • ✅ Correct code with standalone package:

    import React from 'react';
    import PropTypes from 'prop-types'; // Import directly from the package
    const MyComponent = () => <div />;
    MyComponent.propTypes = {
      name: PropTypes.string // Use the imported PropTypes object
    };
    

  If you're using CommonJS (require syntax), make sure you're doing const PropTypes = require('prop-types'); instead of pulling it from require('react').PropTypes.

• Double-check the prop-types package is properly installed
  Sometimes installation glitches can leave the package missing or corrupted:

  1. Delete your node_modules folder and lock file (package-lock.json or yarn.lock)
  2. Reinstall dependencies with:

     npm install
     # Or if using Yarn:
     yarn install
     

  3. Verify prop-types is listed in your package.json under dependencies (not devDependencies—since it's needed in production)

• Hunt down leftover React.PropTypes references
  Do a full project search for React.PropTypes—you might have missed an old component, utility file, or even a comment that's still using the old syntax. Every instance needs to be replaced with the imported PropTypes object.

• Clear Webpack's cache
  Webpack might be holding onto old compiled code that still references React.PropTypes:

  • If you're using webpack-dev-server, restart it with the --no-cache flag:

    webpack-dev-server --no-cache
    

  • Or manually delete the Webpack cache directory (usually located at node_modules/.cache/webpack)

• Check for Webpack alias misconfigurations
  If your Webpack config has aliases for React, make sure it's not interfering with the prop-types package. For example, an alias that points to a custom React build instead of the official npm package could break the import chain. Stick to the default resolve setup unless you have a specific reason to modify it.

Once you work through these steps, that TypeError should be gone. The most common issue is forgetting to update imports in every single component—don't overlook small or rarely used files! 😊

内容的提问来源于stack exchange，提问作者MadMatt