I have developed a React app locally using Create React App, and it works perfectly fine when running on my localhost. However, when I deploy the compiled code to my Hostinger hosting provider, I encounter a white page with the following error messages in the browser console:
Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
DevTools failed to load source map: Could not load content for chrome-extension://bmnlcjabgnpnenekpadlanbbkooimhnj/browser-polyfill.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
I have verified that all the necessary files, including index.html, main.b5e18376.js, and manifest.json, are correctly uploaded to the hosting server. However, I can’t seem to figure out why these errors are occurring. It’s important to note that everything works as expected on my localhost during development.
Could someone please guide me on how to troubleshoot and resolve this issue? I would greatly appreciate any insights or suggestions.
import { useState, useEffect } from 'react';
import './App.css';
import {Link, useNavigate} from "react-router-dom";
import { Main } from './main';
export function Signup(){
const h = new Main();
useEffect(() => {
if(h.getCookie("valid") === "true"){
navigate("/home")
}
},[h.getCookie("valid")])
const [idNum, setIDNum] = useState('');
const [pass, setPass] = useState('');
const [pass2, setPass2] = useState('');
const [email, setEmail] = useState('');
const [fn, setFN] = useState('');
const [ln, setLN] = useState('');
const [error, setError] = useState(true);
const navigate = useNavigate();
const url = "https://laravel-land-project.online/test.json"
const checkPass = (pass, pass2) => {
if (pass.length < 8)
{
document.getElementById("2").innerText = "Password must be at least 8 characters"
setError(true)
}
else{
let template = /^(?=.*[!@#$%^&*()<>?/+=_~])(?=.*[0-9])(?=.*[A-Z]).*$/;
if (!template.test(pass))
{
document.getElementById("2").innerText = "Password must contain at least one special character, number, and a capital letter"
setError(true)
}
}
if(pass !== pass2)
{
document.getElementById("3").innerText = "Passwords must match"
setError(true)
}
}
const checkID = (id) => {
if (id.length !== 8)
{
document.getElementById("1").innerText = "ID must be 8 characters long";
setError(true)
}
else
{
for (let i = 0; i < id.length; i++)
{
if (id.charAt(i) < "0" || id.charAt(i) > "9")
{
document.getElementById("1").innerText = "ID must be a number";
setError(true)
break;
}
}
}
}
const checkEmail = (email) => {
let num = ""
let start = 0;
for(let i = 0; i < email.length; i++){
num += email.charAt(i)
if(email.charAt(i + 1) === "@"){
start = i + 2;
break
}
}
const domain = "htu.edu.jo"
let rest = ''
for (let i = start; i < email.length; i ++)
{
rest += email.charAt(i);
}
if (rest !== domain)
{
document.getElementById("4").innerText = `Email must end in @${domain}`
setError(true)
}
if (num !== idNum || num.length !== 8)
{
document.getElementById("4").innerText = "Invalid University Email"
setError(true)
}
}
const handleSubmit = event => {
event.preventDefault();
setError(false)
document.getElementById("1").innerText = ""
document.getElementById("2").innerText = ""
document.getElementById("3").innerText = ""
document.getElementById("4").innerText = ""
checkPass(pass, pass2)
checkID(idNum)
checkEmail(email)
};
const handleInputChange = () => {
setIDNum(document.getElementById("id").value);
setPass(document.getElementById("pass").value)
setPass2(document.getElementById("pass2").value)
setEmail(`${document.getElementById("id").value}@htu.edu.jo`)
if(document.getElementById("id").value ==='')
{
setEmail('')
}
setFN(document.getElementById('firstname').value)
setLN(document.getElementById('lastname').value)
};
//SEND API
const sendInfo = async () => {
const data = {
name: `${fn} ${ln}`,
email: email,
id_number: idNum,
major: document.getElementById("major").value,
password: pass,
password_confirmation: pass2 // corrected property name
};
/* try {
const response = await fetch(url, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(data)
});
const valid = await fetch(url);
}
catch (error) {
console.log("=)")
}*/
const nameValue = `${encodeURIComponent(fn)}`;
const idValue = encodeURIComponent(idNum);
const passValue = encodeURIComponent(pass);
document.cookie = `name=${nameValue}; Secure `;
document.cookie = `id=${idValue}; Secure`;
document.cookie = `pass=${passValue}; Secure`;
document.cookie = `valid=true; Secure`;
document.cookie = `path=/home; Secure`;
navigate("/home");
};
//SEND API
useEffect(() => {
if (!error) {
sendInfo();
}
}, [error, sendInfo]);
return(
<div className='cont'>
<div className="login">
<form onSubmit={ handleSubmit }>
<div className='input-cont'>
<h1 className='slim center'>Sign-up</h1>
<div className='name-cont'>
<input
type="text"
className='name'
placeholder="First Name"
autoComplete="off"
id="firstname"
onChange={handleInputChange}
value={fn}
required
/>
<input
type="text"
className='name'
placeholder="Last Name"
autoComplete="off"
id="lastname"
onChange={handleInputChange}
value={ln}
required
/>
</div>
<input
type="text"
className='rest'
placeholder="ID number"
autoComplete="off"
id="id"
value={idNum}
onChange={handleInputChange}
required
/>
<p className='error' id="1"></p>
<input
className='rest'
type='email' placeholder='University Email' autoComplete='off' id='email' required
value={email}
onChange={handleInputChange}></input>
<p className='error' id="4"></p>
<select className='rest' id="major" required>
<option value={"na"} selected disabled='true'>Select your Major</option>
<option value={"cs"} id='cs'>Computer Science</option>
<option value={"cyber"} id='cyber'>Cybersecurity</option>
<option value={"ai"} id='ai'>Data Science and AI</option>
</select>
<p className='error' id="5"></p>
<input
className='rest'
type="password"
placeholder="password"
autoComplete="off"
id="pass"
value={pass}
onChange={handleInputChange}
required
/>
<p className='error' id="2"></p>
<input
className='rest'
type="password"
placeholder="re-enter password"
autoComplete="off"
id="pass2"
value={pass2}
onChange={handleInputChange}
required
/>
<p className='error' id="3"></p>
<input type="submit" className="submit" value="Sign-up"></input>
</div>
</form>
<p className='goto-signup'>Already have an account? <Link to='/'>Log-in</Link></p>
</div>
</div>
);
}
import './App.css';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import { Login } from './Login';
import { Signup } from './Signup';
import { Forgot } from './Forgot';
import { Sent } from './Sent';
import {Home} from './Home';
import { Main } from './main';
import { useEffect, useState } from 'react';
import { Calculator } from './Calculator';
import { Account } from './Account';
var isValid;
function Header() {
const h = new Main();
const [isMenuOpen, setIsMenuOpen] = useState(false);
window.onload = () =>{
if(h.getCookie("valid") === "true") isValid = true
}
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
const img = "../account.png";
return (
<header>
<>
<h2 className="logo">HTU Helper</h2>
{h.getCookie("valid") === "true" ? (
<>
<div className="menu-icon" onClick={toggleMenu}>
<div className={isMenuOpen ? 'icon open' : 'icon'}>
<i className="fa-solid fa-bars menu-icon"></i>
</div>
</div>
<nav className={isMenuOpen ? 'menu-items open' : 'menu-items'}>
<Link to="/home">
<button className='header-button'>Recommend Courses</button>
</Link>
<Link to="/gpa">
<button className='header-button'>GPA Calculator</button>
</Link>
{isValid && (
<Link to="/account">
<button className="account-button">
{screen.width > 750 ? (
<img className="account-img" src={img} alt="Account" />
) : (
"Account"
)}
</button>
</Link>
)}
</nav>
</>
) : (
<div></div>
)}
</>
</header>
);
}
function App() {
return (
<>
<Router>
<Header></Header>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/forgot_password" element={<Forgot />} />
<Route path="/email_sent" element={<Sent />} />
<Route path='/home' element={<Home />}></Route>
<Route path='/gpa' element={<Calculator />}></Route>
<Route path='/account' element={<Account />}></Route>
</Routes>
</Router>
</>
);
}
export default App;
import './App.css';
import { Link, useNavigate } from 'react-router-dom';
import { Main } from './main';
import { useEffect } from 'react';
export function Home() {
const h = new Main();
const navigate = useNavigate();
useEffect(() => {
if(h.getCookie("valid") !== "true"){
navigate("/");
}
},[h.getCookie("valid")]);
return (
<>
<div className='home'>
<h1 className='slim center'> {`Welcome ${h.getCookie("name")}!`}</h1>
</div>
</>
);
}
import { useState,useEffect } from 'react';
import './App.css';
import { Link , useNavigate} from 'react-router-dom';
import { Main } from './main';
export function Login() {
const navigate = useNavigate();
const h = new Main();
useEffect(() => {
if(h.getCookie("valid") === "true"){
navigate("/home")
}
},[h.getCookie("valid")])
const [idNum, setIDNum] = useState('');
const [pass, setPass] = useState('');
const checkPass = (pass) => {
if (pass.length < 8)
{
document.getElementById("2").innerText = "Password must be at least 8 characters"
}
else
{
let template = /^(?=.*[!@#$%^&*()<>?/+=_~])(?=.*[0-9])(?=.*[A-Z]).*$/;
if (!template.test(pass))
{
document.getElementById("2").innerText = "Password must contain at least one special character, number, and a capital letter"
}
}
}
const checkID = (id) => {
if (id.length !== 8)
{
document.getElementById("1").innerText = "ID must be 8 characters long";
}
else
{
for (let i = 0; i < id.length; i++)
{
if (id.charAt(i) < "0" || id.charAt(i) > "9")
{
document.getElementById("1").innerText = "ID must be a number";
break;
}
}
}
}
const handleSubmit = event => {
event.preventDefault();
document.getElementById("1").innerText = ""
document.getElementById("2").innerText = ""
checkPass(pass)
checkID(idNum)
setPass('')
};
const handleInputChange = () => {
setIDNum(document.getElementById("id").value);
setPass(document.getElementById("pass").value)
};
return (
<div className='cont'>
<div className="login">
<form onSubmit={handleSubmit}>
<div className='input-cont'>
<h1 className='slim center'>Log-in</h1>
<input
type="text"
className='rest'
placeholder="ID number"
autoComplete="off"
id="id"
value={idNum}
onChange={handleInputChange}
required
/>
<p className='error' id="1"></p>
<input
className='rest'
type="password"
placeholder="password"
autoComplete="off"
id="pass"
value={pass}
onChange={handleInputChange}
required
/>
<p className='error' id="2"></p>
<input type="submit" className="submit" value="Log-in" />
</div>
</form>
<p className="goto-signup">
Don't have an account? <Link to="/signup">Sign-up</Link>
</p>
<p className="goto-signup">
<Link to={"/forgot_password"}>forgot password?</Link>
</p>
</div>
</div>
);
}
mainfest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
I tried removing some blocks of code I thought where causing the problem with comments and it didn’t work. I tried giving the error and manifest,json file to chatgpt but it didn’t help much. I also wanted to note the code was working not that long ago, but some recent additions are probably the cause of the problem. I tried searching for similar problems but none of the solutions worked.