React returns an Uncaught SyntaxError: Unexpected token '<' error and I was able to figure out that it's because the script tag returns HTML instead of Javascript bundle. This only happens when trying to navigate programmatically, say after logging in. Other pages show fine but.
How do I make the script tag return Javascript instead of HTML? Also, why does the script tag return HTML instead of JavaScript when the program navigates programmatically.
I'm using the React-router package to route the pages and I'm suspecting it has something to do with it. If so, any way around it?
App.js
import { Routes, Route } from "react-router-dom";
import { ChakraProvider } from "@chakra-ui/react";
import LandingPage from "./LandingPage";
import Login from "./authentication/Login";
import RequireAuth from "./authentication/RequireAuth";
import Register from "./authentication/Register";
import ClientDashboard from "./dashboard/client/ClientDashboard";
import LoanRequest from "./dashboard/client/LoanRequest";
import Offers from "./dashboard/client/Offers";
import ShowOffer from "./dashboard/client/ShowOffer";
import EditOffer from "./dashboard/client/EditOffer";
import PublishOffer from "./dashboard/client/PublishOffer";
import InvestorDashboard from "./dashboard/investor/InvestorDashboard";
import InvestorDashboard2 from "./dashboard/investor/InvestorDashboard2";
import InvestorOffers from "./dashboard/investor/InvestorOffers";
import InvestorBids from "./dashboard/investor/InvestorBids";
import InvestorDeclinedBids from "./dashboard/investor/InvestorDeclinedBids";
import Profile from "./dashboard/client/ProfileSettings";
import BrokerDashboard from "./dashboard/broker/Dashboard";
import NewClient from "./dashboard/broker/NewClient";
import AllClients from "./dashboard/broker/AllClients";
import NewOffer from "./dashboard/broker/NewOffer";
import NewOfferTranche from "./dashboard/broker/NewOfferTranche";
import NewOfferTiming from "./dashboard/broker/NewOfferTiming";
function App() {
return (
<ChakraProvider>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/profile" element={<Profile />} />
{/*Client dashboard*/}
<Route
path="/client/dashboard"
element={
<RequireAuth>
<ClientDashboard />
</RequireAuth>
}
/>
<Route
path="/client/new-loan"
element={
<RequireAuth>
<LoanRequest />
</RequireAuth>
}
/>
<Route
path="/client/offers"
element={
<RequireAuth>
<Offers />
</RequireAuth>
}
/>
<Route
path="/client/offers/offer"
element={
<RequireAuth>
<ShowOffer />
</RequireAuth>
}
/>
<Route
path="/client/offers/offer/edit"
element={
<RequireAuth>
<EditOffer />
</RequireAuth>
}
/>
<Route
path="/client/offers/offer/publish"
element={
<RequireAuth>
<PublishOffer />
</RequireAuth>
}
/>
{/*Investor Dashboard*/}
<Route
path="/investor/dashboard"
element={
<RequireAuth>
<InvestorDashboard />
</RequireAuth>
}
/>
<Route
path="/investor/offers"
element={
<RequireAuth>
<InvestorDashboard2 />
</RequireAuth>
}
/>
<Route
path="/investor/offers/offer"
element={
<RequireAuth>
<InvestorOffers />
</RequireAuth>
}
/>
<Route
path="/investor/bids"
element={
<RequireAuth>
<InvestorBids />
</RequireAuth>
}
/>
<Route
path="/investor/bids/declined"
element={
<RequireAuth>
<InvestorDeclinedBids />
</RequireAuth>
}
/>
</ChakraProvider>
);
}
export default App;
Login.js
import React, { useState } from "react";
import { Link, useNavigate, useLocation, Navigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { signInAsync } from "../../redux/authSlice";
import DocumentHead from "../DocumentHead";
import Button from "../Button";
import setBgImage from "../../utils/setBgImage";
import phoneLady from "../../assets/images/phoneLady.jpg";
export default function Login() {
const pageName = "Login";
const navigate = useNavigate();
const { state } = useLocation();
const [form, setForm] = useState({
emailAddress: "",
password: "",
isChecked: false,
isLoading: false,
});
const [formErrors, setFormErrors] = useState({
emailAddress: "",
password: "",
emptyFields: "",
});
const { isLoggedIn } = useSelector((state) => state.auth);
const { message } = useSelector((state) => state.message.server);
// Dipstach Redux actions
const dispatch = useDispatch();
const handleChange = (e) => {
const target = e.target;
const name = target.name;
const value =
target.type === "checkbox" ? target.checked : target.value;
setForm((state) => {
return {
...state,
[name]: value,
};
});
};
// Input from form state
const { emailAddress, password } = form;
const handleSubmit = (e) => {
e.preventDefault();
setForm((state) => {
return {
...state,
isLoading: true,
};
});
const data = { email: emailAddress, password };
for (let props in data) {
if (data[props] === "" || data[props] === null) {
setForm((state) => ({...state, isLoading: false}));
setFormErrors((state) => ({...state, emptyFields: "Please fill in the fields"}));
return
}
}
// Redux hook dispatches sign-in action (Login requst)
dispatch(signInAsync(data)).then((response) => {
console.log(response);
if ("user" in response) {
const userType = response.user.groups[0];
if (userType.name === "Client") {
navigate(state?.path || "/client/dashboard"); // <----- Error upon navigation
// Reload to update Redux state
window.location.reload()
}
if (userType.name === "Broker") {
navigate(state?.path || "/broker/dashboard"); // <----- Error upon navigation
// Reload to update Redux state
window.location.reload()
}
if (userType.name === "Investor") {
navigate(state?.path || "/investor/dashboard"); // <--- Error upon navigation
// Reload to update Redux state
window.location.reload()
}
return
}
});
};
if (isLoggedIn) return (<Navigate to="/" replace />);
return (
<>
<DocumentHead title={pageName} />
<section id="orderbook-login" className="orderbook-authentication">
<div className="grid grid-cols-1 md:grid-cols-2 h-full">
<div
id="intro-background"
className="hidden md:block"
style={setBgImage && setBgImage(phoneLady)}
>
<div
id="login-intro"
className="flex flex-col items-center auth-intro"
>
<div
id="login-title"
className="bg-white px-6 mb-3 self-start flex items-center justify-center shadow-md orderbook-icon"
>
Orderbook
</div>
<h1 className="shadow-sm">
Welcome to your go to financial platform
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation.
</p>
</div>
<div id="overlay"></div>
</div>
<div id="orderbook-form">
<form
className="h-full"
onSubmit={(e) => handleSubmit(e)}
>
<div className="pt-20 pb-10 px-12">
<h1
id="orderbook-home"
className="text-center mb-10 leading-6 md:hidden"
>
<Link to="/" className="text-gray-400">
Orderbook Online
</Link>
</h1>
<div className="px-4 sm:px-0 mb-3">
<h2 className="text-lg font-medium leading-6 pb-3 sm:pb-2">
Welcome back
</h2>
<p className="mt-1 text-sm text-gray-600">
Log into your account
</p>
</div>
<div className="grid grid-cols-2 gap-5">
<div className="col-span-6 sm:col-span-4">
<input
type="text"
name="emailAddress"
id="email-address"
autoComplete="email"
placeholder="Email"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
required
onChange={(e) => handleChange(e)}
/>
</div>
<div className="col-span-6 sm:col-span-4">
<input
type="password"
name="password"
id="password"
autoComplete="password"
placeholder="Password"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
required
onChange={(e) => handleChange(e)}
/>
</div>
<div className="col-span-6 sm:col-span-4">
<div className="flex items-start">
<div className="flex items-center h-5">
<input
type="checkbox"
name="isChecked"
id="persist-login"
className="focus:ring-white h-4 w-4 text-indigo-600 border-black rounded"
onChange={(e) =>
handleChange(e)
}
/>
</div>
<div className="ml-3 text-sm">
<label
htmlFor="persist-login"
className="font-medium text-black"
>
Keep me logged in
</label>
</div>
</div>
</div>
<div className="col-span-6 sm:col-span-4 mt-1 flex items-end">
<Link
to="#"
id="forgot-password"
className="w-full"
>
Forgot password?
</Link>
</div>
<div className="col-span-6 sm:col-span-4 mt-1">
<Button
type="submit"
buttonClass="login-button auth-button"
>
Login{" "}
{form.isLoading ? (
<i className="fa fa-spinner fa-pulse fa-3x fa-fw" style=></i>
) : null}
</Button>
</div>
<div
id="dont-have-account"
className="col-span-6 sm:col-span-4 mt-1 text-center account-signal"
>
<span>Don't have an account yet?</span>{" "}
<Link to="/register">Sign up</Link>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</>
);
}
from React production build not showing page after logging in
No comments:
Post a Comment