React TypeError: __WEBPACK_IMPORTED_MODULE_0_react__.PropTypes is undefined

Question

I am making a react app using routers and I'm getting the following error:

React TypeError: WEBPACK_IMPORTED_MODULE_0_react.PropTypes is undefined

How can I avoid it?

Here the code for the 2 routers, post and profile:

Posts

import React,{Component} from 'react';


class Posts extends Component{
    render(){
        return <div>  Posts </div>
    }
}

export default Posts;

Profile

import React,{Component} from 'react';


class Profile extends Component{
    render(){
        return <div>  Profile </div>
    }
}

export default Profile;

index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import PropTypes from 'prop-types';

//COMPONENTS
import Posts from './Components/posts';
import Profile from './Components/profile';


class App extends Component{

    render(){
        return <div> home </div>

    }
}


ReactDOM.render(
    <BrowserRouter>
    <div>
    <Route path="/posts" component={Posts}>  </Route>

    <Route path="/profile" component={Profile}>  </Route>

    </div>
    </BrowserRouter>
    
    ,document.querySelector('#root'))

Here is a screenshot of the error:

Answer 1

What version of React are you using?

I got this error when upgrading to React 16, and changing my react lines in package.json to:

"react-dom": "^15.1.1",
"react": "^15.1.1",

and then running npm install and npm start fixed it for me.

Answer 2

I had the same problem and late noticed that I had a typo in my import statement.

Instead of:

import React from "react"

I had:

import {React} from "react"

Answer 3

import PropTypes from 'prop-types';

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

Answer 4

I modified version of these packages in packages.json file

"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^5.1.0",
"redux": "^4.0.1",

then run "npm install" and "npm start" its working

Answer 5

fixed it in "react-dom": "^16.6.3",by changing

import React,{Component} from 'react';    
class App extends Component{
render(){
    return <div> home </div>
  }
}

to

import React from 'react';    
class App extends React.Component{
render(){
    return <div> home </div>
  }
}

Hope it helps :)

Answer 6

In my case, the fix was to replace class FooBar extends React.component { with class FooBar extends React.Component {