每次点击都会产生未捕获的类型错误：无法读取未定义的属性（读取“0”）

Question

我的网站 React 工作正常，但我正在尝试修复此控制台错误。每次点击都会产生这样的结果：

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)

无论在网站的哪个位置。

我尝试删除组件并查看它是否来自特定的内容，但最终删除了整个 app.js 内容，但它仍然在发生。

知道要寻找什么吗？

我正在使用 React + Vite + Typescript + Tailwind

我的 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 />);

我的应用程序.tsx

import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Landing from "./pages/landing/Landing";
import Sidebar from "./components/Sidebar/Sidebar";
import Footer from "./components/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;

错误指向的文件是这个（最后一行显然是导致错误的原因）

Answer 1

该错误与 content.js 相关。

这是一个可以与浏览器访问的网页进行交互的脚本（参见https://developer.chrome.com/docs/extensions/mv3/content_scripts）

该错误仅发生在 Chrome 中。我使用的是 Chrome 109.0.5414.119。原因在于扩展。将 Chrome 扩展程序“Typio Form Recovery”中名为“访问站点”的设置更改为特定站点而不是所有站点或“单击”即可解决该问题。

错误原因不在应用程序代码中，而是在 Chrome 扩展程序中。

（每次点击 Angular 应用程序时都会出现同样的错误。上面列表中唯一常见的依赖项是 TypeScript。我使用的是 TypeScript 4.9.4。）