未捕获的类型错误：超级表达式必须是 null 或函数 - 它不会消失

Question

我得到错误提示:

Uncaught TypeError: Super expression must either be null or a function
at index.js:974:1
at index.js:973:1
at Module.<anonymous> (index.js:972:1)
at n (index.js:14:1)
at e.exports (index.js:50:6)
at Object.<anonymous> (index.js:4:1)
at f ((index):1:1398)
at Module.79 (change-password.js:26:15)
at f ((index):1:1398)
at Object.46 (main.96136933.chunk.js:1:87)

这是我的index.js

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter, Route, Routes } from "react-router-dom";
import AccountDetails from "./components/admin/account-details";
import AddDeveloper from "./components/admin/add-developer";
import AddProperty from "./components/admin/add-property";
import Address from "./components/admin/adress";
import ChangePassword from "./components/admin/change-password";
// import Dashboard from "./components/admin/dashboard";
// import EditDeveloper from "./components/admin/edit-developer";
// import FavouriteProperties from "./components/admin/favourite-properties";
import ListDeveloper from "./components/admin/list-developer";
import ListProperty from "./components/admin/list-property";
import Payment from "./components/admin/payment";
import Profile from "./components/admin/profile";
import FreeholdGridPage from "./components/freehold";
import HomeV1 from "./components/home-v1";
import LoginV1 from "./components/login";
import MyAccount from "./components/my-account";
import PersistLogin from "./components/persistLogin";
import RegisterV1 from "./components/register";
import RequireAuth from "./components/require-Auth";
import Service from "./components/service";
import { AuthProvider } from "./context/AuthProvider";
class Root extends React.Component {
render() {
return (
<HashRouter>
<div>
<AuthProvider>
<Routes>
<Route path="/" element={<HomeV1 />} />
<Route path="/login" element={<LoginV1 />} />
<Route path="/register" element={<RegisterV1 />} />
<Route path="/freehold" element={<FreeholdGridPage />} />
<Route element={<PersistLogin />}>
<Route element={<RequireAuth />}>
<Route path="/service" element={<Service />} />
<Route path="/my-account" element={<MyAccount />}>
{/* <Route path="dashboard" element={<Dashboard />} /> */}
<Route path="profiles" element={<Profile />} />
<Route path="address" element={<Address />} />
<Route
path="account-details"
element={<AccountDetails />}
/>
<Route path="dev/list" element={<ListDeveloper />} />
<Route path="prop/list" element={<ListProperty />} />
{/* <Route path="fav-prop" element={<FavouriteProperties />} /> */}
<Route path="dev/add" element={<AddDeveloper />} />
<Route path="prop/add" element={<AddProperty />} />
<Route path="payments" element={<Payment />} />
<Route
path="change-password"
element={<ChangePassword />}
/>
{/* <Route path="dev/edit/:id" element={<EditDeveloper />} />
<Route path="prop/edit/:id" element={<EditDeveloper />} /> */}
</Route>
{/* <Route path="/service-details" element={<ServiceDetails />} />
<Route path="/team" element={<Team />} />
<Route path="/add-listing" element={<AddListing />} /> */}
</Route>
</Route>
</Routes>
</AuthProvider>
</div>
</HashRouter>
);
}
}
export default Root;
ReactDOM.render(<Root />, document.getElementById("quarter"));

这是我的changepassword.js

import React from "react";
function ChangePassword() {
return (
<div className="tab-pane " id="ltn_tab_1_9">
<div className="ltn__myaccount-tab-content-inner">
<div className="account-login-inner">
<form action="#" className="ltn__form-box contact-form-box">
<h5 className="mb-30">Change Password</h5>
<input
type="password"
name="password"
placeholder="Current Password*"
/>
<input
type="password"
name="password"
placeholder="New Password*"
/>
<input
type="password"
name="password"
placeholder="Confirm New Password*"
/>
<div className="btn-wrapper mt-0">
<button className="theme-btn-1 btn btn-block" type="submit">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
);
}
export default ChangePassword;

我在这上面挣扎了一整天。你能帮帮我吗?我已经尝试了所有可能的解决方案，但仍然无法解决这个问题。其他的帖子都说导入了错误的组件，但我觉得这里一切都很好。

Answer 1

你可以把这一行放到你的第一个文件中:

import { Component } from 'react';

更多信息请阅读这篇文章。