Create-react-app: I am using create-react-app for an app I am building and when I try to access PropTypes directly from React I get the following error in the console: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

[interglobalmedia]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes.
Many errors, especially related to "missing modules", are due to npm bugs.

If you're using Windows, follow these instructions to update npm.

If you're using OS X or Linux, run this to update npm:

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

Then try to reproduce the issue again.

Can you still reproduce it?
Yes

Description

I am wondering whether or not you have added the npm package prop-types to create-react app, because if we still have to access PropTypes directly from React, that has been deprecated and PropTypes is therefore ineffective.
What are you reporting?
A bug/deprecation

Expected behavior

To be able to test for proper PropTypes with React.PropTypes without getting an error in the console.
Tell us what you think should happen.
If I remove something that has been set as .isRequired with React.PropTypes, that I should be notified if the type is incorrect (or non-existent).

Actual behavior

I get the following error in the console: Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead. And nothing happens when I try to create an error. It is not recognized by the deprecated React.PropTypes method.
Tell us what actually happens.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): [email protected]
2. node -v: 7.8.0
3. npm -v: 4.2.0

Then, specify:

1. Operating system: Mac OS Sierra 10.12
2. Browser and version: Chrome Version 58.0.3029.81 (64-bit)

Reproducible Demo

Please take the time to create a new app that reproduces the issue.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

Push to GitHub and paste the link here.
https://github.com/interglobalmedia/todo-list-create-react-app
By doing this, you're helping the Create React App contributors a big time!
Demonstrable issues gets fixed faster.

[interglobalmedia]

I just installed node 7.9.0 and I still get the same error in the console.

[interglobalmedia]

So now when I tried to duplicate the issue but this time already had added .isRequired to currentTodo: React.PropTypes.string.isRequired, I still get the deprecation warning, but the React.PropTypes seems to be working. Don't know if it's because I have the latest version of node (7.9.0) or if it is because I have the latest version and isRequired. However, without the isRequired, no error showed up in console if there was a proptype error. Hope this helps!

[gaearon]

Hi! The warning is saying that React.PropTypes will eventually be removed from the react package, so you need to migrate to use the prop-types package instead (it's not urgent—your code is not broken).

First, install prop-types in terminal:

npm install --save prop-types

(or yarn add prop-types if you use Yarn)

Then, you need to update the code as explained in the React 15.5 blog post.

For example, here you could replace:

import React from 'react';

export const TodoForm = (props) => (
    <form>
        <input type="text" onChange={props.handleInputChange} value={props.currentTodo}/>
    </form>)

TodoForm.propTypes = {
    currentTodo: React.PropTypes.string.isRequired,
    handleInputChange: React.PropTypes.func.isRequired
}

with

import React from 'react';
import PropTypes from 'prop-types'; // <------- note I added this

export const TodoForm = (props) => (
    <form>
        <input type="text" onChange={props.handleInputChange} value={props.currentTodo}/>
    </form>)

TodoForm.propTypes = {
    currentTodo: PropTypes.string.isRequired,  // <------- note I changed this
    handleInputChange: PropTypes.func.isRequired  // <------- note I changed this
}

Note that this is not urgent. This is a deprecation warning, and doesn't indicate an immediate problem with your code. It is, however, a good idea to fix it when you have the time so that you can update to React 16 more easily when it becomes available.

I hope this helps!

[interglobalmedia]

Thanks @gaearon! I just thought I would share my insight because I was going through another React Course (using create-react-app again :)), and the instructor created a React.Proptype method initially without adding .isRequired at the end and showed the warning error regarding an incorrect PropType in the console. But he was using React 15.4.0. With 15.5, no such error shows up if you don't add .isRequired. Honestly, was that always the case, even prior to 15.5 that you had to add .isRequired in order to get a React.PropType error, or only since 15.5? This point is not covered in the React warning docs. That's why I initially was a bit worried, because it would have meant that React.PropTypes was completely ineffective! So it probably is a good idea to start using the npm prop-types package going forward, right? Thanks so much for all your wonderful help (again)!

[luftywiranda13]

@interglobalmedia
the problem isn't with .isRequired
but with React.PropTypes

[gaearon]

Let's reopen so I could investigate this:

With 15.5, no such error shows up if you don't add .isRequired

Can you explain in more details how exactly to reproduce the problem? Do I need to change anything in your published project to see the issue? Specifically, I’m interested not in the deprecation message, but in the change in isRequired behavior.

[luftywiranda13]

@interglobalmedia I think the error you got when you didn't add .isRequired is because you also didn't provide default value for it.

but the deprecation warning message from using React.PropTypes and the error from not adding .isRequired was different, right?

[interglobalmedia]

@gaearon I tested again using 7.9.0 (before I was using 7.8.0) without and with .isRequired, and this time I got the error I expected both ways. I even checked using TodoItem.propTypes and TodoItem.PropTypes to cover for any potential "typo" I might have made. The error shows either way this time. I'm wondering if it was a node --version issue? Or a combination of all of the above? What I currently have pushed since my first push for issue submission to the repo, and I was using node 7.9.0, npm 4.2.0. Weird!

[gaearon]

There shouldn't be any difference because of Node versions since this code runs in the browser.

[interglobalmedia]

Well, then it just was one of those things that I couldn't replicate later. I just mentioned because one of the questions you guys pose when we submit an issue is "what version of node were you using?" and "could it be replicated with the latest version?" Thanks for all your help! create-react-app is a great tool.

[gaearon]

Hmm. Let’s close it then but if you bump into this again let us know!
Thanks 👍

[interglobalmedia]

Will do.

[jmlivingston]

My issue was related to react-router. If you are using 3.x, make sure to update to 3.04 or higher. If you're on 4.x, update to 4.1.1.