react-boilerplate项目导入redux-form的Field组件触发TypeError报错

我之前在react-boilerplate项目里集成redux-form时也踩过这个坑，这个报错Uncaught (in promise) TypeError: Cannot read property 'string' of undefined本质是redux-form与项目React版本的PropTypes依赖不兼容，再加上react-boilerplate的DLL打包机制可能放大了这个问题，下面给你几个靠谱的解决办法：

1. 调整redux-form版本并补全prop-types依赖 #

React 15.5版本之后就把内置的PropTypes移除了，移到了单独的prop-types包中，而旧版本的redux-form还是依赖React内置的PropTypes，这就导致了报错。

• 先卸载当前的redux-form，安装一个兼容你项目React版本的版本（比如React 16+可以用8.3.1版本，亲测稳定）：

  npm uninstall redux-form
  npm install redux-form@8.3.1 --save
  

• 确保项目已经安装了prop-types包：

  npm install prop-types --save
  

2. 检查并更新react-boilerplate的DLL配置 #

报错里提到了reactBoilerplateDeps.dll.js，说明redux-form可能没被加入到DLL的依赖列表中，导致webpack加载时出现异常。

• 打开项目里的internals/webpack/webpack.dll.js文件，找到vendors数组，把redux-form添加进去：

  const vendors = [
    // 其他已有的依赖...
    'redux-form'
  ];
  

• 重新生成DLL文件：

  npm run build:dll
  

3. 应急修改（不推荐长期使用） #

如果上面的方法暂时没法生效，你可以临时修改redux-form的源码应急：

• 找到node_modules/redux-form/es/FormSection.js文件，在顶部添加prop-types的导入：

  import PropTypes from 'prop-types';
  

• 把文件里所有的React.PropTypes替换成PropTypes，比如把React.PropTypes.string改成PropTypes.string

这个错误的核心原因就是：FormSection.js里尝试读取React.PropTypes，但在高版本React中这个属性已经不存在了，所以抛出了“读取undefined的string属性”的错误；再加上react-boilerplate的DLL打包如果没包含redux-form，会导致模块加载的依赖链断裂，进一步触发这个报错。

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