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

I can't see anything wrong here, are you using webpack? Can you share the config.. — Dan Mason, Aug 15 '17 at 12:14
@Purgatory I believe [create-react-app](https://github.com/facebookincubator/create-react-app) is using webpack. But I'm not using webpack separately. — Lars, Aug 15 '17 at 12:20
Is it `'PropTypes' is not defined` or `'propTypes' is not defined` — Dan Mason, Aug 15 '17 at 12:23
Perhaps this issue can help? https://github.com/facebookincubator/create-react-app/issues/2528 — Dan Mason, Aug 15 '17 at 12:26
@Purgatory `'propTypes' is not defined`. Thanks I will look into it. — Lars, Aug 15 '17 at 12:31
I have added an answer any chance you have installed `esline v4.x` instead of using the one that is shipped with the repo? — Dan Mason, Aug 15 '17 at 12:40

score 61 · Answer 1 · edited Sep 20 '18 at 03:42

61

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

edited Sep 20 '18 at 03:42

xskxzr

12,442
12
37
77

answered Sep 20 '18 at 03:17

Ratul Bhattacharjee

711
5
3

thanks! fixed my issue. but why have made this changes it breaks me some compiling. when running jest – Ido Bleicher Jul 30 '19 at 08:44
1

Also we need to change React.PropTypes to PropTypes if any. – Vivek Goel May 19 '20 at 05:28
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. – Netsab612 Aug 28 '21 at 16:02
For those who, like me, did not understand why propTypes is usefull in the first place : https://reactjs.org/docs/typechecking-with-proptypes.html – Netsab612 Aug 28 '21 at 16:02
You have to run `npm i -S prop-types` in the terminal in order to work with PropTypes – Zain Sadaqat Oct 19 '21 at 19:51

score 9 · Accepted Answer · answered Aug 15 '17 at 12:40

9

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.

answered Aug 15 '17 at 12:40

Dan Mason

2,177
1
16
38

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. – Lars Aug 15 '17 at 13:03
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. – Vivek Goel May 19 '20 at 05:27

score 4 · Answer 3 · answered Apr 01 '18 at 18:20

4

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

answered Apr 01 '18 at 18:20

jeff roussel

81
1

score 3 · Answer 4 · edited Oct 15 '21 at 02:26

3

Please Install prop-types

using this code:

npm install --save prop-types

edited Oct 15 '21 at 02:26

Penny Liu

15,447
5
79
98

answered Sep 18 '18 at 11:02

testing

79
3

score 0 · Answer 5 · edited Oct 15 '21 at 02:39

0

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

edited Oct 15 '21 at 02:39

Penny Liu

15,447
5
79
98

answered Aug 30 '20 at 07:23

Aakash

21,375
7
100
81

score -6 · Answer 6 · answered Aug 15 '17 at 12:18

-6

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

Here to install package

answered Aug 15 '17 at 12:18

Farzam Babar

100
6

You can see above that he is already importing the separate `prop-types` package. – Dan Mason Aug 15 '17 at 12:21
I do have the prop-types npm package installed. – Lars Aug 15 '17 at 12:21

score -6 · Answer 7 · answered Aug 15 '17 at 12:35

-6

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

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

answered Aug 15 '17 at 12:35

Anastasis Skotidas

74
1
4

'Proptypes' is not defined

7 Answers7

Linked