my website React works correctly but I'm trying to fix this console error. Every click produces this:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Array.<anonymous> (content.js:7:89199)
    at c.trigger (content.js:7:81786)
    at HTMLDocument.<anonymous> (content.js:7:81253)

No matter where in the website.

I tried to remove ponents and see if it was ing from something in particular but I ended up removing the whole app.js content and it's still happening.

Any idea for what to look for?

I'm using React + Vite + Typescript + Tailwind

My main.tsx

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { AxiosInterceptor } from "./interceptors/axios.interceptor";

AxiosInterceptor();

const root = ReactDOM.createRoot(document.getElementById("root")!)!;
root.render(<App />);

My App.tsx

import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Landing from "./pages/landing/Landing";
import Sidebar from "./ponents/Sidebar/Sidebar";
import Footer from "./ponents/Footer/Footer";
import { PrivateRoutes, PublicRoutes } from "./models";
import { AuthGuard } from "./guards";
import { RoutesWithNotFound } from "./utilities";
import { lazy, Suspense } from "react";
import { Provider } from "react-redux";
import store from "./redux/store";
import { LinkedInCallback } from "react-linkedin-login-oauth2";

const Login = lazy(() => import("./pages/login/Login"));
const Signup = lazy(() => import("./pages/signup/Signup"));
const Private = lazy(() => import("./pages/private/Private"));

function App() {
  return (
    <Suspense
      fallback={
        <div className="flex items-center h-screen justify-center">
          <div className="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-red-600"></div>
        </div>
      }
    >
      <Provider store={store}>
        <Router>
          <Sidebar />
          <RoutesWithNotFound>
            <Route path="/" element={<Navigate to={PrivateRoutes.PRIVATE} />} />
            <Route path={PublicRoutes.LANDING} element={<Landing />} />
            <Route path={PublicRoutes.LOGIN} element={<Login />} />
            <Route
              path={PublicRoutes.LINKEDIN_LOGIN}
              element={<LinkedInCallback />}
            />
            <Route
              path={PublicRoutes.LINKEDIN_REGISTER}
              element={<LinkedInCallback />}
            />
            <Route path={PublicRoutes.SIGNUP} element={<Signup />} />
            <Route element={<AuthGuard />}>
              <Route
                path={`${PrivateRoutes.PRIVATE}/*`}
                element={<Private />}
              />
            </Route>
          </RoutesWithNotFound>
          <Footer />
        </Router>
      </Provider>
    </Suspense>
  );
}
export default App;

The file pointed by the error is this one (last line is responsible for the error apparently)

my website React works correctly but I'm trying to fix this console error. Every click produces this:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Array.<anonymous> (content.js:7:89199)
    at c.trigger (content.js:7:81786)
    at HTMLDocument.<anonymous> (content.js:7:81253)

No matter where in the website.

I tried to remove ponents and see if it was ing from something in particular but I ended up removing the whole app.js content and it's still happening.

Any idea for what to look for?

I'm using React + Vite + Typescript + Tailwind

My main.tsx

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { AxiosInterceptor } from "./interceptors/axios.interceptor";

AxiosInterceptor();

const root = ReactDOM.createRoot(document.getElementById("root")!)!;
root.render(<App />);

My App.tsx

import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Landing from "./pages/landing/Landing";
import Sidebar from "./ponents/Sidebar/Sidebar";
import Footer from "./ponents/Footer/Footer";
import { PrivateRoutes, PublicRoutes } from "./models";
import { AuthGuard } from "./guards";
import { RoutesWithNotFound } from "./utilities";
import { lazy, Suspense } from "react";
import { Provider } from "react-redux";
import store from "./redux/store";
import { LinkedInCallback } from "react-linkedin-login-oauth2";

const Login = lazy(() => import("./pages/login/Login"));
const Signup = lazy(() => import("./pages/signup/Signup"));
const Private = lazy(() => import("./pages/private/Private"));

function App() {
  return (
    <Suspense
      fallback={
        <div className="flex items-center h-screen justify-center">
          <div className="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-red-600"></div>
        </div>
      }
    >
      <Provider store={store}>
        <Router>
          <Sidebar />
          <RoutesWithNotFound>
            <Route path="/" element={<Navigate to={PrivateRoutes.PRIVATE} />} />
            <Route path={PublicRoutes.LANDING} element={<Landing />} />
            <Route path={PublicRoutes.LOGIN} element={<Login />} />
            <Route
              path={PublicRoutes.LINKEDIN_LOGIN}
              element={<LinkedInCallback />}
            />
            <Route
              path={PublicRoutes.LINKEDIN_REGISTER}
              element={<LinkedInCallback />}
            />
            <Route path={PublicRoutes.SIGNUP} element={<Signup />} />
            <Route element={<AuthGuard />}>
              <Route
                path={`${PrivateRoutes.PRIVATE}/*`}
                element={<Private />}
              />
            </Route>
          </RoutesWithNotFound>
          <Footer />
        </Router>
      </Provider>
    </Suspense>
  );
}
export default App;

The file pointed by the error is this one (last line is responsible for the error apparently)

• javascript
• reactjs
• typescript
• tailwind-css
• vite

Share Improve this question Follow edited Feb 9, 2023 at 20:40 Gabriele Cinà asked Feb 9, 2023 at 20:32 Gabriele CinàGabriele Cinà 37011 gold badge55 silver badges1818 bronze badges 5

• 2 Please include a minimal, reproducible example of your code. – asportnoy Commented Feb 9, 2023 at 20:34
• It's a whole project in which no matter what I remove it still happens. Do you think that config files could be useful? I can include App.tsx too – Gabriele Cinà Commented Feb 9, 2023 at 20:39
• You can look at the code referenced by that error in devtools to try and find the culprit. – asportnoy Commented Feb 9, 2023 at 20:40
• I've added main, app tsx and a picture of the file pointed by the error. Is not written by me. – Gabriele Cinà Commented Feb 9, 2023 at 20:43
• 1 Like said above, it's not possible to give solution without a proper code. This usually happens if the value that you're trying to access is undefined. I'll advice you to check all the ponents and give fallback values to the variables, correct initialisation of data and check array index out of bounds too. – Roshan Kanwar Commented Feb 9, 2023 at 21:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

The error relates to content.js.

This is a script that can interact with web pages that the browser visits (See e.g. https://developer.chrome./docs/extensions/mv3/content_scripts)

The error occurs in Chrome only. I am using Chrome 109.0.5414.119. The cause is in an extension. Changing the setting in Chrome extension 'Typio Form Recovery' named 'Access to site' into a specific site instead of all sites or 'on click' solves the issue.

Cause of the error is not in the app code but in Chrome extension.

(Same error occurs in an Angular app at every click. The only mon dependency from the list above is TypeScript. I am using TypeScript 4.9.4.)