Cannot read property 'forEach' of undefined in React

Question

I have the next code that i want to use to validate private routing:

import React from 'react';

import { Route, Redirect } from 'react-router-dom';
import routes from '../../routing/routes';

export default function PrivateRoute({ component: Component, ...rest }) {
    // TODO: user verification
    let user = 1;

    const authComponentResolver = props => {
        const authorizedComponent = <Component {...props} />
        const redirectToAuthComponent = <Redirect to={{ pathname: routes.login.path, state: { from: props.location } }} />

        if (user !== undefined) {
            return authorizedComponent;
        } else {
            return redirectToAuthComponent;
        }
    }

    return (
        <Route {...rest} render={authComponentResolver} />
    );
}

But it throws the next error:

./src/components/auth/private-route.js
TypeError: Cannot read property 'forEach' of undefined

I cant understand why, but the next code works:

import React from 'react';

import { Route, Redirect } from 'react-router-dom';
import routes from '../../routing/routes';

export default function PrivateRoute(a) {
    // TODO: user verification
    let user = 1;

    const authComponentResolver = props => {
        const authorizedComponent = <a.component {...props} />
        const redirectToAuthComponent = <Redirect to={{ pathname: routes.login.path, state: { from: props.location } }} />

        if (user !== undefined) {
            return authorizedComponent;
        } else {
            return redirectToAuthComponent;
        }
    }

    return (
        <Route {...a} render={authComponentResolver} />
    );
}

Can someone explain me why first version fails to compile? Both version do the same i think.

Here is the way i call the component:

const DashboardRoutes = () => (
    <Switch>
        <PrivateRoute exact path={routes.root.path} component={Dashboard} />
        <PrivateRoute path={routes.dashboard.path} component={Dashboard} />

        <PrivateRoute exact path={routes.persons.path} component={Persons} />
        <PrivateRoute path={routes.personsNew.path} component={NewPerson} />

        <PrivateRoute exact path={routes.branchOffice.path} component={BranchOffices} />
        <PrivateRoute path={routes.personsNew.path} component={NewPerson} />

        <PrivateRoute component={Error404} />
    </Switch >
);

In the console i have this error:

VM911 main.chunk.js:116 Uncaught Error: Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read property 'forEach' of undefined
    at Linter.parseResults (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/Linter.js:121)
    at Linter.printOutput (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/Linter.js:85)
    at cache (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/eslint-loader/dist/cacheLoader.js:46)
    at Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/loader-fs-cache/index.js:122
    at Gunzip.cb (Users/groupon/Proyectos/Uselessscat/reservas-client/node_modules/loader-fs-cache/index.js:47)
    at Gunzip.zlibBufferOnEnd (zlib.js:131)
    at Gunzip.emit (events.js:203)
    at endReadableNT (_stream_readable.js:1145)
    at process._tickCallback (internal/process/next_tick.js:63)
    at Object../src/components/auth/private-route.js (VM911 main.chunk.js:116)
    at __webpack_require__ (VM909 bundle.js:786)
    at fn (VM909 bundle.js:151)
    at Module../src/routing/module-router.js (VM911 main.chunk.js:1098)
    at __webpack_require__ (VM909 bundle.js:786)
    at fn (VM909 bundle.js:151)
    at Module../src/routing/router.js (VM911 main.chunk.js:1226)
    at __webpack_require__ (VM909 bundle.js:786)
    at fn (VM909 bundle.js:151)
    at Module../src/index.js (VM911 main.chunk.js:787)
    at __webpack_require__ (VM909 bundle.js:786)
    at fn (VM909 bundle.js:151)
    at Object.0 (VM911 main.chunk.js:2552)
    at __webpack_require__ (VM909 bundle.js:786)
    at checkDeferredModules (VM909 bundle.js:46)
    at Array.webpackJsonpCallback [as push] (VM909 bundle.js:33)
    at VM911 main.chunk.js:1

but it is indecipherable :(

Thanks.

one difference both did differently is rest doesn't contain component and a does contain component, maybe if you debug it it might be the cause — Jee Mok
– Jee Mok, Commented Sep 30, 2019 at 4:40
Could you show a sandbox to see the error? Works fine using render props. — Joseph D.
– Joseph D., Commented Sep 30, 2019 at 5:09
@Panther running npm list eslint-loader prints [email protected] -> [email protected] — UselesssCat
– UselesssCat, Commented Sep 30, 2019 at 15:24

Ikechukwu Kalu · Accepted Answer · 2019-10-02 09:50:02Z

3

If you are using react-scripts version 3.1.2 or any above 3.0.1, you may need to downgrade to version 3.0.1 as it seems to work fine. See the github issue

answered Oct 2, 2019 at 9:50

Ikechukwu Kalu

1,69915 silver badges15 bronze badges

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

2 Comments

Amacelia Over a year ago

is this issue fixed for 3.4+?

Ikechukwu Kalu Over a year ago

Hi @Amacelia, I've not had the chance to test this recently but the GitHub issue mentioned they've got a fix. You could give it a try if you're currently using it and share here

zhuber · Accepted Answer · 2019-09-30 05:53:21Z

1

It seems to be eslint-loader build error - please take a look at this. Try updating to newest version of eslint-loader and then it should work. If you look at latest version of Linter.js, you'll see that parseResults method now has if check before calling forEach.

answered Sep 30, 2019 at 5:53

zhuber

5,5544 gold badges35 silver badges68 bronze badges

2 Comments

UselesssCat Over a year ago

I tried, but im using the lastest version of react-scripts. I tried to update the eslint-loader dependency of react-script in package-lock.json but doesn't work :(

zhuber Over a year ago

You don't change package-lock but package.json.

Thanh Ngo · Accepted Answer · 2019-09-30 12:30:18Z

1

This error from eslint of react-scripts, so my solution is disabled eslint.

Step 1: yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev
Step 2: At file config-overrides.js:

const { override, disableEsLint } = require("customize-cra");        
module.exports = override(
   disableEsLint()
);

Step 3: Update script at file package.json:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build"
},

answered Sep 30, 2019 at 12:30

Thanh Ngo

3651 gold badge2 silver badges15 bronze badges

Comments

Dwaipayan Chakroborty · Accepted Answer · 2021-07-19 14:09:57Z

I was facing the same error. Was having a bad time, solving this out.

I tried downgrading to react-scripts: 3.0.1,acc. to some solutions on the web. Didn't work.

What worked for me --> In my case, I observed, Webpack minified my public\index.html file.

After clearing out the minified index.html and writing the regular index.html ,for React. All the errors/issues went away. And now, everything is working fine.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Issues I was facing :

Most changes in the code are not being reflected, in the dev server.
The error startWorkingOnPEndingInteractions was popping up every time the dev server loaded.
All of this went away , when I started afresh with a new public/index.html file

Hope this helps. I love the OS community. 💕

Collectives™ on Stack Overflow

Cannot read property 'forEach' of undefined in React

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related