Accessing PropTypes via the main React package is

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

Be sure not to use React.PropTypes, sample:

MyComponent.propTypes = {
    MyString: PropTypes.string.isRequired
}

Answer 2

Also be sure to import React properly. I had this:

import * as React from 'react';

And should be:

import React from 'react';

This fixed all my warnings.

Answer 3

Since the release of React v15.5.0 React.PropTypes is deprecated and has moved to another library. You should use npm install prop-types and use PropTypes from there.

The code at ./components/containers/Scorboard.js looks perfectly fine, you probably have a React.PropTypes somewhere else in your code.

Another options is that some dependency that you are using is still using it the old way. You can try to update your dependencies but as this deprecation is quite new I doubt that every library had already released an update.

More details about the PropTypes deprecation here.

UPDATE

It seems like redux has updated it's dependencies to use React v15.5.0 and got rid of the deprecation warnings. It is fixed in v4 and v5 as well.

Relevant pull requests: #663 and #666

Answer 4

You can able to fix using upgrade versions

npm install --save react@15.4.0 react-dom@15.4.0

Answer 5

I solved this warning this way:

Installed PropTypes

# npm install -S prop-types

Import PropTypes like this

import PropTypes from 'prop-types';

instead of doing this:

import { PropTypes } from 'react';

Answer 6

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.