CODEWITHSUNDEEP
javascriptreactjs
UselesssCat
UselesssCat

Reputation: 2406

Cannot read property 'forEach' of undefined in React

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.

Upvotes: 10

Views: 12402

Answers (4)

Dwaipayan Chakroborty
Dwaipayan Chakroborty

Reputation: 302

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

Upvotes: 1

Ikechukwu Kalu
Ikechukwu Kalu

Reputation: 1644

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

Upvotes: 3

Thanh Ngo
Thanh Ngo

Reputation: 365

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

Upvotes: 1

zhuber
zhuber

Reputation: 5524

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.

Upvotes: 1

Related Questions