React router error Cannot read property 'forEach' of undefined

Question

While updating react from ver 15 to ver 16 I got this error:

Cannot read property 'forEach' of undefined in PrivateRoute component.

Package JSON shows those versions:

"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-router": "^5.1.1",
"react-router-dom": "^5.1.1",
"react-router-redux": "*"

Here is component code to look at:

I tried to install eslint and eslint-loader as I found that this might be the problem but no luck

import React from "react";
import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({
    component: Component,
    Authenticated,
    AdminPage,
    Admin,
    ...props
}) => (
    <Route
        {...props}
        render={props => {
            if (AdminPage) {
                if (Authenticated && Admin) {
                    return <Component {...props} />;
                } else {
                    return (
                        <Redirect
                            to={{
                                pathname: "/",
                                state: { from: props.location }
                            }}
                        />
                    );
                }
            } else {
                if (Authenticated) {
                    return <Component {...props} />;
                } else {
                    return (
                        <Redirect
                            to={{
                                pathname: "/login",
                                state: { from: props.location }
                            }}
                        />
                    );
                }
            }
        }}
    />
);

export default PrivateRoute;

Could you provide a reproducible example? You can create one easily on CodeSandbox. — Samuel Vaillant
– Samuel Vaillant, Commented Sep 30, 2019 at 10:13
two option you can try if your react-scripts version is greater than 3.0.1 then, downgrade to 3.0.1 and if not then remove node_modules and package-lock.json file and re-install node_modules ,may this error resolves — Kishan Jaiswal
– Kishan Jaiswal, Commented Sep 30, 2019 at 12:27
react scripts is at 3.1.2. Now I will try to downgrade to 3.0.1 and check — youngster
– youngster, Commented Sep 30, 2019 at 13:08

steamdragon · Accepted Answer · 2019-09-30 15:01:31Z

2

Here are some things to try:

Downgrade react-scripts to 3.0.1
Remove eslint from devDependencies
Delete package-lock.json, delete node_module, run npm install

If using yarn, you can also add this to package.json:

"resolutions": {
    "eslint-loader": "3.0.2"
}

More info at: https://github.com/facebook/create-react-app/issues/7753 (Bug report)

answered Sep 30, 2019 at 15:01

steamdragon

1,19015 silver badges16 bronze badges

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

1 Comment

adamgy Over a year ago

I had this error after upgrading from Next.js 10 to 11. Deleting package-lock.json, node_modules and build worked for me. Thanks!

Collectives™ on Stack Overflow

React router error Cannot read property 'forEach' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related