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({ ponent: 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/ponents/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 = <aponent {...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 pile? Both version do the same i think.

Here is the way i call the ponent:

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

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

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

        <PrivateRoute ponent={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/ponents/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.

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({ ponent: 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/ponents/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.ponent {...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 pile? Both version do the same i think.

Here is the way i call the ponent:

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

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

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

        <PrivateRoute ponent={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/ponents/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.

• javascript
• reactjs

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

4 Answers 4

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

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.

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"
},

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 munity.