EDIT: It turns out it was only an issue on my computer, but an explanation would still be helpful if you have one. Thanks again!
I am attempting to create a development page for a website I am working on, and have a blank index.html page that redirects you to the development page. This all works as intended. I am using svelte to make things easier in future, however, when I deploy it, the svelte "Hello World" that shows up upon creating a new svelte project keeps appearing on top of the development page HTML. The odd thing about this is that it only happens when I deploy it, not when I load up the static HTML, not when I load up a local server. It doesn't even show up if I don't use a custom domain name. I am using cloudflare pages and cloudflare to redirect the domain name to the cloudflare page. My domain is registered with GoDaddy, if that at all matters.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/public/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function() {
window.location.replace("under-construction/under-construction.html");
}
under-construction/under-construction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='under-construction.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="under-construction.js"></script>
<div >
<h1 >Book Planet UK is currently undergoing development.</h1>
<span >We are hoping to be back by 2023, so hold tight until then!