PropTypes for Next.js: TypeError: prop_types__webpack_import

Question

我在Next.js中有一个组件:

import PropTypes from "prop-types";
export default function DetailComponent({ data }) {
return (
<div>
{data.heading} {data.title}
</div>
);
}
DetailComponent.propTypes = {
data: PropTypes.shape({
heading: PropTypes.string,
title: PropTypes.string,
}),
};

当我试图查看带有组件的页面时，会出现这个错误:

error - TypeError: prop_types__WEBPACK_IMPORTED_MODULE_0___default(...).shape is not a function
at Object../components/section/DetailComponent.js (D:Documentsappfrontend.nextserverpagessection[...slug].js:237:59)
at __webpack_require__ (D:Documentsappfrontend.nextserverwebpack-runtime.js:25:42)
at Object../pages/section/[...slug].js (D:Documentsappfrontend.nextserverpagessection[...slug].js:2323:91)
at __webpack_require__ (D:Documentsappfrontend.nextserverwebpack-runtime.js:25:42)
at __webpack_exec__ (D:Documentsappfrontend.nextserverpagessection[...slug].js:2663:39)
at D:Documentsappfrontend.nextserverpagessection[...slug].js:2664:28
at Object.<anonymous> (D:Documentsappfrontend.nextserverpagessection[...slug].js:2667:3)
at Module._compile (node:internal/modules/cjs/loader:1102:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
at Module.load (node:internal/modules/cjs/loader:967:32) {
page: '/section/80539-asd/2'
}

下面的代码可以正常运行:

DetailComponent.propTypes = {
data: PropTypes.object,
};

为什么我不能使用PropTypes.shape()?

这是我的package.json:

"dependencies": {
"axios": "^0.22.0",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"sass": "^1.42.1",
"swr": "^1.0.1",
},
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-next": "11.1.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"prop-types": "^15.7.2"
}

编辑:下面的方法似乎有效……但你应该什么时候使用PropTypes.shape()?

DetailComponent.propTypes = {
data: {
heading: PropTypes.string,
title: PropTypes.string,
},
};

Answer 1

property -type "安装在devDependencies下。作为依赖项安装修复了该错误。npm i prop-types -P