'Proptypes' 未定义答案

【问题标题】：'Proptypes' is not defined'Proptypes' 未定义
【发布时间】：2018-01-23 08:32:27
【问题描述】：

我在 Create React App 的帮助下设置了一个新的 React

但是，我遇到了一个 linting 问题。我收到以下 linting 错误 'PropTypes' is not defined. (no-undef)。

这是导致问题的代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Routers extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired
  };

...

我尝试使用react/prop-types 规则，但无济于事。

【问题讨论】：

这里看不出有什么问题，你用的是webpack吗？你能分享一下配置吗..
@Purgatory 我相信create-react-app 正在使用 webpack。但是我没有单独使用webpack。
是'PropTypes' is not defined还是'propTypes' is not defined
也许这个问题可以提供帮助？ github.com/facebookincubator/create-react-app/issues/2528
@Purgatory 'propTypes' is not defined。谢谢，我会调查的。

标签： reactjs eslint react-proptypes

【解决方案1】：

从 react 15.5 开始，PropTypes 包含在单独的包“prop-types”中。所以这条线会有所帮助

import PropTypes from 'prop-types'

您可以阅读更多here

【讨论】：

谢谢！解决了我的问题。但是为什么要进行此更改，这使我有些编译不便。开玩笑时
如果有的话，我们还需要将 React.PropTypes 更改为 PropTypes。
这绝对应该是公认的答案。特别是因为这个问题是第一个出现在 Google 上的问题，而且遇到的问题是如此微不足道。我正在开始一个新项目，使用来自 create-react-app 的 React 17.0.2。我刚刚在 IntlliJ 中激活了 eslint，我的项目停止工作，因为它不符合此规则。 PropsType 迁移到现在已经 3 年了，这已经是老新闻了，像我这样的新人会越来越多地遇到这个问题。
对于那些像我一样不明白为什么 propTypes 有用的人：reactjs.org/docs/typechecking-with-proptypes.html
您必须在终端中运行 npm i -S prop-types 才能使用 PropTypes

【解决方案2】：

根据本期comment.

这似乎是因为你已经安装了eslint 4.x，而你应该只使用create-react-app 附带的 eslint 版本。您应该删除您手动安装的所有 eslint，并使用 repo 附带的。

【讨论】：

这似乎是问题所在。我最终运行npm run eject 来解压react-create-app 包的配置。在此之后，我编辑了 package.json 以使用 eslint 版本 3。
如果你的意思是在你的项目中本地安装了eslint，这个是不支持的。我知道人们会这样做，但不建议这样做。您不需要在本地安装它，它可以开箱即用。在本地安装它可能会弄乱版本，这可能是发生的事情。

【解决方案3】：

我在全局安装了 eslint 的项目中遇到了同样的问题。我通过在项目中手动安装 eslint 解决了这种情况： npm i eslint --save

再见杰夫

【讨论】：

【解决方案4】：

请安装prop-types

使用此代码：

npm install --save prop-types

【讨论】：

【解决方案5】：

如果您使用<script> 标签；你可以添加这个标签：

<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js" integrity="sha512-ssNhh7jlzc+K93ckIlSXFHHz6fSFv0l619WOv8xbFNRbFOujbasb42LVMOggDrQR1ScJncoWb+KAJx1uF3ipjw==" crossorigin="anonymous"></script>

你可以得到minified/non-minified和其他versionhere

祝你好运……

【讨论】：

【解决方案6】：

您可以将 PropTypes 放在类之后（类外）：

Routers.propTypes = {
   history: PropTypes.object.isRequired
}

【讨论】：

【解决方案7】：

请安装 prop-types npm 包 - 在单独的包上创建 react 1.15 和更高版本。

Here to install package

【讨论】：

您可以在上面看到他已经在导入单独的prop-types 包。
我确实安装了 prop-types npm 包。