'Proptypes' is not defined

Question

I'm setting up a new React with the help of: Create React App

However, I'm running into a linting issue. I'm receiving the following linting error 'PropTypes' is not defined. (no-undef).

Here is the code that is causing the issue:

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

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

...

I tried playing around with the react/prop-types rule, but to no avail.

Dubose

I can't see anything wrong here, are you using webpack? Can you share the config.. – Matron

@Purgatory I believe create-react-app is using webpack. But I'm not using webpack separately. – Dubose

Is it 'PropTypes' is not defined or 'propTypes' is not defined – Matron

Perhaps this issue can help? github.com/facebookincubator/create-react-app/issues/2528 – Matron

@Purgatory 'propTypes' is not defined. Thanks I will look into it. – Dubose

I have added an answer any chance you have installed esline v4.x instead of using the one that is shipped with the repo? – Matron

Answer 1

According to this issue comment.

It appears to be because you have installed eslint 4.x when you should just use the eslint version that is shipped with create-react-app. You should remove any eslint you have manually installed and use the one that comes with the repo.

Matron

This appeared to be the issue. I ended up running npm run eject to unpack the configuration of the react-create-app package. After this I edited the package.json to use the eslint version 3. – Dubose

If you mean that you installed eslint locally in your project, this is not really supported. I know that people do this, but it is not recommend. You don't need to install it locally, it will work out of the box. Installing it locally can mess up the versions, which is what probably happened. – Cordwain

Answer 2

Since react 15.5, PropTypes is included in a separate package, 'prop-types'. So this line will help

import PropTypes from 'prop-types'

You can read more here

Ordzhonikidze

thanks! fixed my issue. but why have made this changes it breaks me some compiling. when running jest – Warrenwarrener

Also we need to change React.PropTypes to PropTypes if any. – Cordwain

This should definitely be the accepted answer. Especially since this issue is the first one showing up on Google and the issue being so trivial to encounter. I am starting a new project, with React 17.0.2 from create-react-app. I just activated eslint in IntlliJ and my project stoped working because it wasn't compliant with this rule. It's been 3 years since PropsType was migrated so now, it's old news and newcomers like me will have this issue more and more. – Assistant

For those who, like me, did not understand why propTypes is usefull in the first place : reactjs.org/docs/typechecking-with-proptypes.html – Assistant

You have to run npm i -S prop-types in the terminal in order to work with PropTypes – Cosec

Answer 3

I had the same problem on a project with eslint installed globally. I solved this case by installing eslint manualy in the project: npm i eslint --save

bye jeff

Gybe

Answer 4

Please Install prop-types

using this code:

npm install --save prop-types

Cadaverine

Answer 5

If you're using <script> tags; you can add this tag:

<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>

You can get the minified/non-minified and other version here

Good Luck...

Parados

Answer 6

Please install the prop-types npm package - react 1.15 and greater on separate package is created.

Here to install package

Lowenstern

You can see above that he is already importing the separate prop-types package. – Matron

I do have the prop-types npm package installed. – Dubose

Answer 7

You can place the PropTypes just after the class (outside the class):

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

Kaela