Uncaught DOMException: Failed to execute 'replaceState' on 'History' in react router dom 6

Question

I created an application using react js. I updated react router dom version 5 to 6. But then the problem VM14:2 Uncaught ReferenceError: process is not defined. The problem was solved by updating react-script to version 5 but a new problem appeared in the redirect section of the page. When I'm creating a protected route when redirect it showing error:

Uncaught DOMException: Failed to execute 'replaceState' on 'History': function create(Location) {
      return (0,C_Users_frsnm_Documents_Job_Side_On_Progress_medisy_ui_node_modules...<omitted>... } could not be cloned.

This is my route page:

import { useEffect } from "react";
import { Route, Routes } from "react-router-dom";
import "./App.css";
import { Anamnesa } from "./components/administration/anamnesa";
import { FormAnamnesa } from "./components/administration/anamnesa/_form";
import { FormPatient } from "./components/administration/patient/_form";
import DashboardDokter from "./components/dashboard/dokter";
import { BlankLayout } from "./components/layout/blankLayout";
import MainLayout from "./components/layout/mainLayout";
import { ResultVisit } from "./components/visit/ResultVisit";
import { PageNotFound } from "./pages/404";
import RegisBPJSPage from "./pages/administration/bpjs/register";
import VisitBPJSPage from "./pages/administration/bpjs/visit";
import DashboardPage from "./pages/administration/dashboard";
import KIRLetterPage from "./pages/administration/letter/letter.kir";
import SickLetterPage from "./pages/administration/letter/letter.sick";
import LetterStatementPage from "./pages/administration/letter/letter.statement";
import PrintSickPage from "./pages/administration/letter/print.sick";
import PrintStatementPage from "./pages/administration/letter/print.statement";
import MobileClosePage from "./pages/administration/mobile.close";
import MobilePoliesPage from "./pages/administration/mobile.polies";
import MobileSchedulePage from "./pages/administration/mobile.schedule";
import OnlinePage from "./pages/administration/online";
import { Patient } from "./pages/administration/patient";
import QueueList  from "./pages/administration/queue";
import { CheckupQueue } from "./pages/administration/queue/CheckupQueue";
import PrintQueuePage from "./pages/administration/queue/print.queue";
import PrintQueueOnlinePage from "./pages/administration/queue/print.queue.online";
import { QueueNumber } from "./pages/administration/queue/QueueNumber";
import ReferencePage from "./pages/administration/reference";
import DetailReferencePage from "./pages/administration/reference.detail";
import { RegQueue } from "./pages/administration/reg_queue";
import ReservationPage from "./pages/administration/reservation/reservation";
import HistoryVisitPage from "./pages/administration/visit.history";
import PrintMedicalRecordPage from "./pages/administration/visit/print.medical.record";
import { Coba } from "./pages/coba";
import { CheckupPage } from "./pages/doctor/checkup";
import FourthStepPage from "./pages/doctor/checkup/fourth.step.form";
import QueueDoctorPage from "./pages/doctor/checkup/queue";
import ResultPage from "./pages/doctor/checkup/result";
import FirstStepPage from "./pages/doctor/checkup/_first.step.form";
import SecondStepPage from "./pages/doctor/checkup/_second.step.form";
import ThirdStepPage from "./pages/doctor/checkup/_third.step.form";
import PackagePage from "./pages/doctor/config/package";
import PackageMedicineDetailPage from "./pages/doctor/config/_detail";
import DashboardDoctorrPage from "./pages/doctor/dashboard";
import VisitDoctorPage from "./pages/doctor/visit";
import ResultVisitDoctorPage from "./pages/doctor/visit/result";
import {Login} from "./pages/login";
import PolyPage from "./pages/management/poly/poly";
import PolyFormPage from "./pages/management/poly/poly.form";
import PrbPage from "./pages/management/prb/prb";
import PrbFormPage from "./pages/management/prb/prb.form";
import PublicHealthPage from "./pages/management/public-health/public.health";
import PublicHealthFormPage from "./pages/management/public-health/public.health.form";
import PublicHealthFormDetailPage from "./pages/management/public-health/public.health.form.detail";
import TreatmentPage from "./pages/management/treatment/treatment";
import TreatmentFormPage from "./pages/management/treatment/_form";
import { Visit } from "./pages/visit";
import RequireAuth from "./routes/requiredAuth";
import { RolesUser } from "./services/configurations/user";

function App() {
  const allRoles = [
                  RolesUser.ADMIN,
                  RolesUser.CASHIER,
                  RolesUser.DOCTOR,
                  RolesUser.LABORATORY,
                  RolesUser.MANAGEMENT,
                  RolesUser.MIDWIFE,
                  RolesUser.NURSE,
                  RolesUser.PHARMACY,
                  RolesUser.WAREHOUSE
                ]
  return (
    <div className="App">
      <Routes>
        <Route element={<BlankLayout />}>
          <Route path="/login" element={<Login />} />
          
          {/* Start of Main Layout */}
          {/* <Route element={<MainLayout />}> */}
            
          <Route element={<RequireAuth allowedRole={allRoles} />}>
            <Route element={<MainLayout />}>  
                <Route path="/" element={<DashboardPage />} />
            </Route>
          </Route>

            <Route element={<RequireAuth allowedRole={[RolesUser.ADMIN, RolesUser.NURSE]} />}>
              <Route path="/reg-queue" element={<RegQueue/>} />
              <Route path="/queue-print" element={<PrintQueuePage/>} />
              <Route path="/queue-online-print" element={<PrintQueueOnlinePage/>} />
              <Route path="/queue-number/:id" element={<QueueNumber/>} />

              <Route path="/queue-list" element={<QueueList/>} />
              <Route path="/checkup-queue" element={<CheckupQueue/>} /> 
              <Route path="/coba" element={<Coba/>} />

              <Route path="/patients/:id" element={<FormPatient/>} />
              <Route path="/patients" element={<Patient/>} />

              <Route path="/anamnesis/:id" element={<FormAnamnesa/>} />
              <Route path="/anamnesis" element={<Anamnesa/>} />

              <Route path="/visit/:id" element={<ResultVisit/>} />
              <Route path="/visit-print/" element={<PrintMedicalRecordPage/>} />
              <Route path="/visit" element={<Visit/>} />
              <Route path="/list-checkup" element={<HistoryVisitPage/>} />

              <Route path="/reference/:id" element={<DetailReferencePage/>} />
              <Route path="/reference" element={<ReferencePage/>} />
              <Route path="/reservation" element={<ReservationPage/>} />
              <Route path="/register-online" element={<OnlinePage/>} />

              {/* Letter */}
              {/* <Route path="/statement-letter/:id" element={<PrintStatementPage/>} />
              <Route path="/statement-letter" element={<LetterStatementPage/>} />
              <Route path="/sick-letter/:id" element={<PrintSickPage/>} />
              <Route path="/sick-letter" element={<SickLetterPage/>} />
              <Route path="/kir-letter/:id" element={<KIRLetterPage/>} />
              <Route path="/kir-letter" element={<KIRLetterPage/>} /> */}
                    {/* <Route element path="/ujicoba" /> */}
              {/* <Route path="/mobile-polies" element={<MobilePoliesPage />} />
              <Route path="/mobile-close" element={<MobileClosePage/>} />
              <Route path="/mobile-schedule" element={<MobileSchedulePage/>} /> */}

              {/* BPJS */}
              {/* <Route path="/register-bpjs" element={<RegisBPJSPage/>} />
              <Route path="/visit-bpjs" element={<VisitBPJSPage/>} /> */}

              {/* Configuration */}
              {/* <Route path="/prb/:id" element={<PrbFormPage/>} />
              <Route path="/prb" element={<PrbPage/>} />

              <Route path="/treatment/:id" element={<TreatmentFormPage/>} />
              <Route path="/treatment" element={<TreatmentPage/>} />

              <Route path="/polies/:id" element={<PolyFormPage/>} />
              <Route path="/polies" element={<PolyPage/>} />

              <Route path="/public-health/:id/village" element={<PublicHealthFormDetailPage/>} />
              <Route path="/public-health/:id" element={<PublicHealthFormPage/>} />
              <Route path="/public-health" element={<PublicHealthPage/>} /> */}
            </Route>

            <Route element={<RequireAuth allowedRole={[RolesUser.DOCTOR]} />}>
                <Route path="/checkup" element={<CheckupPage />} />  
                <Route path="/checkup/step1/:id" element={<FirstStepPage/>} />
                <Route path="/checkup/step2/:id" element={<SecondStepPage/>} />
                <Route path="/checkup/step3/:id" element={<ThirdStepPage/>} />
                <Route path="/checkup/step4/:id" element={<FourthStepPage/>} />
                <Route path="/checkup/result/:id" element={<ResultPage/>} />

                <Route path="/queue-list" element={<QueueDoctorPage/>} />

                <Route path="/visit/:id" element={<ResultVisitDoctorPage/>}/>
                <Route path="/visit" element={<VisitDoctorPage/>}/>

                <Route path="/list-checkup" element={<HistoryVisitPage/>} />
                <Route path="/patients/:id" element={<FormPatient/>} />

                <Route path="/package-medicine/:id" element={<PackageMedicineDetailPage/>} />
                <Route path="/package-medicine" element={<PackagePage/>} />
            </Route>
            
          {/* </Route> */}
          {/* End of Main Layout */}



          <Route path="/404" element={<PageNotFound/>} />
          <Route path="*" element={<PageNotFound/>} />
        </Route>
    </Routes>
    </div>
  );
}

export default App;

and this is my required auth component:

import { FC } from "react"
import { Navigate, Outlet } from "react-router-dom"
import useAuthContext from "../hooks/useAuthContext"
import { RolesUser } from "../services/configurations/user"
import useLocation from "../services/pharmacy/location"

interface IRequiredAuth {
    allowedRole:Array<string>
}

const RequireAuth:FC<IRequiredAuth> = ({allowedRole}) => {
    const { state } = useAuthContext()
    const location = useLocation()
    console.log(` ROlenya ${JSON.stringify(state.roles)}, from require auth. Isi dari location ${JSON.stringify(location)}`)
    console.log(state.isAuthenticated)
    return (
        state.roles?.find(role => allowedRole.includes(role.name as RolesUser))
            ? <Outlet />
            : state.isAuthenticated
                ? <Navigate to="/404" state={{ from:location }} replace /> // <p>Redirect to unauthorize</p>
                : <Navigate to="/login" state={{ from:location }} replace /> // <p>Redirect to login page</p>
            

    )
}

export default RequireAuth

Answer 1

I have found the solution by changing:

<Navigate to="/login" state={{ from:location }} replace />

To:

<Navigate to="/login" />