Cannot read properties of undefined (reading 'includes') in Reactjs

Question

I am working with Reactjs. My code is working fine in localhost but whenever I am trying to upload on 'vercel' then I am getting following error:

Cannot read properties of undefined (reading 'includes')

I search and actually includes is being used in routes/index.js file. Here is our code. Where I am wrong?

const Loadable = (Component) => (props) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const { pathname } = useLocation();
  return ( 
    <Suspense
      fallback={<LoadingScreen isDashboard={pathname.includes("/dashboard")} />}
    >
      <Component {...props} />
    </Suspense>
  );
};

just use ```pathname?.includes("/dashboard")}``` as this will render before pathname is available — Srushti Shah, Mar 27 '23 at 11:31

score 1 · Answer 1 · answered Mar 28 '23 at 08:52

As mentioned by @Srushti Shah, your issue is pathname being undefined on the initial render. Using the optional chaining (?.) operator will short circuit the expression and evaluate to undefined instead of throwing an error, as mentioned in the MDN web docs

Try updating your code to this:

pathname?.includes("/dashboard")

Cannot read properties of undefined (reading 'includes') in Reactjs

1 Answers1