如何解决Node Module中的React版本冲突及PropTypes未定义错误

首先咱们明确问题根源：React 16.0.0起正式移除了内置的PropTypes和createClass，而react-inspector的旧版本是基于React 15的API开发的。哪怕你的依赖声明写了"react": "^15.0.2"，但如果项目实际安装了更高版本的React，就会出现版本冲突导致的报错。

下面给你几个不用修改大量源码的解决方案，按推荐程度排序：

方案1：全局注入PropTypes兼容（最推荐） #

通过webpack的ProvidePlugin把全局的React.PropTypes映射到独立的prop-types包，不用改动react-inspector的源码就能让它正常识别PropTypes。

步骤： #

1. 先安装prop-types包：

npm install prop-types --save
# 或者用yarn
yarn add prop-types

2. 修改webpack配置：
   在你的webpack配置文件中添加ProvidePlugin插件：

const webpack = require('webpack');

module.exports = {
  // ... 其他已有配置
  plugins: [
    // ... 其他已有插件
    new webpack.ProvidePlugin({
      'React.PropTypes': 'prop-types'
    })
  ]
};

如果用Create React App： #

CRA默认不允许直接修改webpack配置，你可以用react-app-rewired来覆盖配置：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev
# 或者用yarn
yarn add react-app-rewired customize-cra --dev

2. 在项目根目录创建config-overrides.js文件：

const { override, addWebpackPlugin } = require('customize-cra');
const webpack = require('webpack');

module.exports = override(
  addWebpackPlugin(
    new webpack.ProvidePlugin({
      'React.PropTypes': 'prop-types'
    })
  )
);

3. 修改package.json里的启动脚本：
   把react-scripts替换成react-app-rewired，比如：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

方案2：使用替代包 #

如果不想折腾兼容配置，可以换用基于React 16+开发的同类包，比如：

• react-json-view：专门用于展示JSON数据，支持展开/折叠，API友好
• react-treeview：轻量的树形组件，可自定义内容
• react-devtools：如果是开发调试用，React官方的devtools也能查看组件树和props

这些包都不需要依赖旧的React PropTypes API，直接安装就能用。

方案3：锁定依赖版本（风险较高） #

通过npm/yarn的版本锁定功能，让react-inspector单独使用React 15.x版本，和项目的高版本React共存。但这种方式可能导致两个React实例存在，引发Invalid hook call等问题，谨慎使用。

对于npm（v8+）： #

在package.json中添加overrides字段：

"overrides": {
  "react-inspector": {
    "react": "15.0.2",
    "react-dom": "15.0.2"
  }
}

对于yarn： #

在package.json中添加resolutions字段：

"resolutions": {
  "react-inspector/react": "15.0.2",
  "react-inspector/react-dom": "15.0.2"
}

添加后重新执行npm install或yarn install即可。

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