Next.js使用PropTypes.shape报is not a function错误咨询

1. 为什么PropTypes.shape()调用报错 #

核心原因有两个：

• 你将prop-types安装在了devDependencies中，Next.js的服务端渲染构建流程中，部分场景下不会完整加载devDependencies下的依赖包。你调用PropTypes.object看起来正常，实际此时导入的PropTypes对象是不完整的，缺失了shape、arrayOf这类高级校验方法。
• 本地node_modules依赖存在缓存损坏，导致prop-types包导出的对象异常。

2. 为什么直接写嵌套对象的写法不报错 #

你补充的嵌套对象写法不符合当前prop-types包的使用规范，这种写法仅仅是没有语法错误，并不会触发内部属性的校验：就算你给data下的heading传入数字类型的值，也不会收到任何PropTypes的警告，相当于校验规则完全不生效。

• 把prop-types从devDependencies移动到dependencies中，执行命令：

npm uninstall prop-types
npm install prop-types

也可以直接手动修改package.json，把prop-types的配置行移到dependencies字段下，再执行npm install。

• 清理本地构建缓存和依赖缓存，执行：

rm -rf .next node_modules package-lock.json
npm install

重启项目后PropTypes.shape()就能正常使用。

当你需要对对象类型的prop的内部属性做精准校验时，就需要使用PropTypes.shape()：

• 可以指定对象内部每个属性的类型、是否必填
• 传参不符合规则时会在控制台抛出清晰的警告，便于开发阶段快速定位传参错误
• 如果只用PropTypes.object，只会校验参数是不是对象，不会校验内部属性是否存在、类型是否正确，开发阶段的错误提示能力非常有限。

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