1

Tried almost everything available on the Internet, and couldn't resolve the problem. When I installed react-router-dom and added Routes and BrowserRouter into my project, I faced this problem:

Uncaught TypeError: Cannot read property 'func' of undefined

and in bundled index.js there is a line where app fails:

var func = _react.PropTypes.func,

Found some solutions stating that react-router 3.2.0 should be used, but that is not the point. I want to use new react-router-dom, currently, installed version is :

    "react-router-dom": "^4.4.0-alpha.1",

NOTE: Please don't mention PropTypes, I know that they've moved in a separate library and I didn't use them in my project.


EDIT: Routes code:

import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';
//import createHashHistory from 'history/createHashHistory';
import App from './App';
import Login from './components/Login/Login';
import PrivateRoute from './components/PrivateRoute/PrivateRoute';
import Unauthorized from './components/Unauthorized/Unauthorized';

//const history = createHashHistory();


const Routes = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/login" component={Login}/>
            <Route exact path="/unauthorized" component={Unauthorized}/>
            <PrivateRoute exact path="/" component={App}/>
        </Switch>
    </BrowserRouter>
);

export default Routes;

PrivateRoute component code:

import React, {Component} from "react";
import {bindActionCreators} from "redux";
import {Redirect, Route} from "react-router-dom";
import {connect} from "react-redux";
import * as authActions from '../../redux/actions/authActions';


class PrivateRoute extends Component {
    render() {
        let {component: Component, loggedUser, ...rest} = this.props;

        return (
            <Route {...rest} render={(props) => (
                loggedUser ?
                    <Component {...props}/>
                    :
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: {from: props.location}
                        }}
                    />
            )}/>
        );
    }
}

function mapStateToProps(state, props) {
    return {
        loggedUser: state.loggedUser
    }
}

function mapDispatchToProps(dispatch) {
    return {
        authActions: bindActionCreators(authActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(PrivateRoute);
Jee Mok
  • 4,537
  • 7
  • 35
  • 66
  • Can you include your React Router code in the question? There is no `Routes` export from `react-router-dom`. – Tholle Jul 22 '18 at 21:03
  • I didn't add `Routes` from `react-router-dom` package, actually `Rotues` is my component for which I posted code above, and I exported it into index and injected into `Provider` tags.. –  Jul 22 '18 at 22:25
  • When do you get the `Cannot read property 'func' of undefined` error? What does your `PrivateRoute` component look like? – Tholle Jul 22 '18 at 22:28
  • 1
    I get it on app start. Actually, app crashes on start. I will post PrivateRoute code in question. I tried to exclude PrivateRoute from Routes but error still exists... –  Jul 22 '18 at 22:31
  • Very odd. Looks correct to me. Have you tried a `rm -rf ./node_modules && npm install`? It might be that you still have an old `react-router-dom@2` installed. – Tholle Jul 22 '18 at 22:33
  • I already did it. When I remove Routes from project and render directly App component, error doesn't occur. But the most weird thing is that, I have here code of my friend's project, and he also uses react-router-dom but older version and his app doesn't crash. I removed every package related to react from my project, and installed again all those packages but same versions as in project of my friend. Error still exists. Could it be something related to webpack (bundling etc) ? –  Jul 22 '18 at 22:37
  • I'm not sure. `_react.PropTypes` was used in old React Router code, so I'm not sure how you are getting this error. – Tholle Jul 22 '18 at 22:40
  • When I comment `Rotues` file (component) and exclude it from rendering in `Provider` tags, error doesn't occur. –  Jul 22 '18 at 23:00

0 Answers0