React-Router cannot read property string of undefined

Question

I am new to React and I am building my first application with React, Redux, and React Router, so far I have successfully set up my boiler plate, however when I want to use React-Router and create routes I get the following error

TypeError: Cannot read property 'string' of undefined
./node_modules/react-router-dom/es/BrowserRouter.js
node_modules/react-router-dom/es/BrowserRouter.js:38
  35 | }(React.Component);
  36 | 
  37 | BrowserRouter.propTypes = {
> 38 |   basename: PropTypes.string,
  39 |   forceRefresh: PropTypes.bool,
  40 |   getUserConfirmation: PropTypes.func,
  41 |   keyLength: PropTypes.number,

This only happens when I try to import and use

import { BrowserRouter, Route } from 'react-router-dom';

Here is my index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import store from './store'

import { BrowserRouter, Route } from 'react-router-dom';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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


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

ReactDOM.render(<Provider store={store}>
  <BrowserRouter>
    <Route path="/hello" component={Hello}/>
    <Route path="/goodbye" component={GoodBye}/>
  </BrowserRouter>
  </Provider>, document.getElementById('root'));
registerServiceWorker();

And my package.json

{
  "name": "reactreduxrouterblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^2.0.0-rc5",
    "react-router-dom": "^4.0.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.4.1",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Any knowledge will be welcomed thanks!

Looking at node-modules/react-router-dom/es/BrowserRouter.js, I see import PropTypes from 'prop-types'; as one of the first lines. Can you make sure this line exists? — user5734311
– user5734311, Commented Oct 11, 2017 at 19:50

Faysal Ahmed · Accepted Answer · 2018-05-09 12:47:59Z

8

Update your react-router-dom in package.json: react-router-dom ^4.2.2

edited May 9, 2018 at 12:47

Faysal Ahmed

7,6875 gold badges32 silver badges54 bronze badges

answered May 9, 2018 at 12:30

Manuel Bautista

1381 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tharindu Hewawitharana · Accepted Answer · 2018-04-27 09:03:57Z

4

Sometimes it may cause due to incompatible versions of "react-router-dom" and "react-router-prop-types". For me it worked with following configuration.

react-router-dom:"^4.2.2",
react-router-prop-type:"^3.2.1"

answered Apr 27, 2018 at 9:03

Tharindu Hewawitharana

414 bronze badges

Comments

Chase DeAnda · Accepted Answer · 2017-10-11 19:59:03Z

2

Try adding the PropTypes package to your app.

basename: PropTypes.string

Looks like you are just missing that package.

EDIT:

Be sure to run npm install to install all dependencies.

edited Oct 11, 2017 at 19:59

answered Oct 11, 2017 at 19:38

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

2 Comments

hwe Over a year ago

I installed the package and I still get the same error

Chase DeAnda Over a year ago

Did you run an npm install?

Michael · Accepted Answer · 2017-10-30 21:25:10Z

2

import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line


App.propTypes = {
    monkey: PropTypes.string,           <--omit "React."
    cat: PropTypes.number.isRequired    <--omit "React."
};


//Wrong:  React.PropTypes.string
//Right:  PropTypes.string

answered Oct 30, 2017 at 21:25

Michael

231 bronze badge

Collectives™ on Stack Overflow

React-Router cannot read property string of undefined

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related