遭遇Uncaught TypeError: 无法读取undefined的属性'bool'错误，求排查方案

Hey there, let's break down this error you're hitting and walk through the most common fixes based on your package.json snippet.

Likely Causes & Solutions #

1. Missing or Misused prop-types Package #

React moved PropTypes into a standalone prop-types package starting in version 15.5. If your components are still trying to access React.PropTypes.bool without having this package installed, you'll get this exact error.

Fix:

• First, install the package:

  npm install prop-types --save
  

• Then update your component code to import PropTypes directly instead of using React.PropTypes:

  import React from 'react';
  import PropTypes from 'prop-types'; // Add this line
  
  const YourComponent = ({ someBooleanProp }) => {
    // Component logic here
  };
  
  YourComponent.propTypes = {
    someBooleanProp: PropTypes.bool // Use PropTypes.bool instead of React.PropTypes.bool
  };
  

2. Incomplete Babel Configuration #

Your package.json shows you're using Babel 6, but it looks like your babel-p... dependency got cut off. If you're missing the babel-preset-react preset (which handles React-specific code transformations like PropTypes), that could lead to untransformed code causing this error.

Fix:

• Ensure babel-preset-react is installed:

  npm install babel-preset-react@^6.24.1 --save-dev
  

• Add it to your .babelrc file:

  {
    "presets": ["react", "es2015"] // Include "react" preset here
  }
  

3. Typos or Missing Imports in Components #

Double-check the components where the error is thrown. It's easy to accidentally omit an import or misspell PropTypes, leading to an undefined value when you try to access .bool.

Fix:

• Verify every component using PropTypes has:
  • A valid import PropTypes from 'prop-types'; statement
  • No typos (like PropType instead of PropTypes)
  • No missing imports for React itself (some older setups require import React from 'react'; even for functional components)

4. Dependency Version Conflicts #

Since you're using Babel 6, mismatched versions of Babel-related packages (like babel-core, babel-loader, or presets) can cause code to be transformed incorrectly, leading to unexpected undefined values.

Fix:

• Delete your node_modules folder and package-lock.json file:

  rm -rf node_modules package-lock.json
  

• Reinstall dependencies to ensure all versions are compatible:

  npm install
  

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