Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix React 15.5.3 PropTypes deprecated warning when using create-react-app

I'm using create-react-app to start React project. At latest React 15.5.3 package, it appears following warnings:

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

I have already follow the blog:

npm install prop-types and import PropTypes from 'prop-types';

but it doesn't work. I don't use any PropTypes or props in code:

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

class App extends Component {
    constructor() {
        super();
        this.state = {
            videoVisible: true,
        };
    }

    ......
}

How to fix that?

Thanks.

like image 810
AvantContra Avatar asked Apr 09 '17 04:04

AvantContra


People also ask

Is PropTypes deprecated?

PropTypes is deprecated since React 15.5.

Why React app is not creating?

If you really need create-react-app , you might need to reinstall Node and reconfigure your dependencies to ensure you have a fresh start with Node, npm, npx, and the like.

How do I run an existing React project in Visual Studio 2019?

When you open Visual Studio (I'm using 2019) there is an option that says "Open a Local Folder". Choose that and select the folder that contains the React application. Once it opens, if you right-click on the package. json files there is an NPM menu that contains your NPM tasks.


1 Answers

Pulled from Reacts blog - npm install prop-types, then use new code. Also it said you can get this error message if a nested component is not using prop-types but the parent is - so you need to check other components.

// Before (15.4 and below)
import React from 'react';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: React.PropTypes.string.isRequired,
}

// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: PropTypes.string.isRequired,
};
like image 179
Spencer Bigum Avatar answered Oct 08 '22 15:10

Spencer Bigum