Accessing PropTypes via the main React package is deprecated

Question

I'm using redux but when I run my code I have this error:

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I install

npm i prop-types -S

but I I still have the same error.

./components/action/article.js

import * as ArticleActionTypes   from '../actiontypes/article';  export const AddArticle = (name, description, prix, image) => {     return {         type: ArticleActionTypes.ADD_ARTICLE,         name,          description,          prix,         image     } }  export const RemoveArticle = index => {     return {         type: ArticleActionTypes.REMOVE_ARTICLE,         index     } } 

./components/actiontypes/article.js

export const ADD_ARTICLE = 'article/ADD_ARTICLE'; export const REMOVE_ARTICLE = 'article/REMOVE_ARTICLE'; export const UPDATE_ARTICLE = 'article/UPDATE_ARTICLE'; 

./components/reducers/article.js

import * as ArticleActionTypes   from '../actiontypes/article';  const initialState = [     {         name: 'test',         description: 'test',         prix: 'test',         image: 'url'     },     {         name: 'test',         description: 'test',         prix: test,         image: 'url'     } ]  export default function Article (state=initialState, action){     switch(action.type){         case ArticleActionTypes.ADD_ARTICLE :              return [                 ...state,                 {                     name: action.name,                     description: action.description,                     prix: action.prix,                     image: action.image                 }             ];         case ArticleActionTypes.REMOVE_ARTICLE :             return [                 ...state.slice(0, action.index),                 ...state.slice(action.index +1)             ] ;         default: return state;     } } 

index.js

import React            from 'react'; import { render }       from 'react-dom'; import {Provider}       from 'react-redux'; import {createStore}    from 'redux';  import ArticleReducer   from './components/reducers/article'; import Scoreboard       from './components/containers/Scoreboard';  const store = createStore(     ArticleReducer,     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )  render(<Provider>             <Scoreboard store={store}/>         </Provider>, document.getElementById('root')); 

./components/containers/Scorboard.js

import React                            from 'react'; import {connect}                        from 'react-redux'; import {bindActionCreactors}            from 'redux'; import PropTypes                        from 'prop-types';  class Scoreboard extends React.Component {      render(){         return (             <div>               Scoreboard             </div>         )     } }  const mapStateToProps = state => {     {         articles :state      } }  Scoreboard.propTypes = {   articles: PropTypes.array.isRequired }  export default connect(mapStateToProps)(Scoreboard); 

Answer 1

As others have mentioned- if you have audited your own project for PropTypes uses but you're still seeing the warning- it's likely coming from an upstream dependency. One way you can track down the cause of this warning is by setting a debug breakpoint where it's logged and then stepping back to the caller. Here's a quick example recording I made:

(A higher-quality version is available here.)

Once you've identified the library in question, consider filing a Github issue (or better yet- a PR!) to inform the authors of the new warning.

In the meanwhile, this is only a dev-mode warning so it should not affect production usage of your application.