PropTypes for Next.js: TypeError: prop_types__WEBPACK_IMPORTED_MODULE_0___default(...).shape is not a function

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:\Documents\app\frontend\.next\server\pages\section\[...slug].js:237:59)
    at __webpack_require__ (D:\Documents\app\frontend\.next\server\webpack-runtime.js:25:42)
    at Object../pages/section/[...slug].js (D:\Documents\app\frontend\.next\server\pages\section\[...slug].js:2323:91)
    at __webpack_require__ (D:\Documents\app\frontend\.next\server\webpack-runtime.js:25:42)
    at __webpack_exec__ (D:\Documents\app\frontend\.next\server\pages\section\[...slug].js:2663:39)
    at D:\Documents\app\frontend\.next\server\pages\section\[...slug].js:2664:28
    at Object.<anonymous> (D:\Documents\app\frontend\.next\server\pages\section\[...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

“prop-types”安装在 devDependencies 下。作为依赖项安装修复了错误。 npm i prop-types -P

PropTypes for Next.js: TypeError: prop_types__WEBPACK_IMPORTED_MODULE_0___default(...).shape is not a function

PropTypes for Next.js: TypeError: prop_types__WEBPACK_IMPORTED_MODULE_0___default(...).shape is not a function

reactjs

react-proptypes

next.js