Instead of PDF I see my own page when deployed

[matildaahlberg]

Hello! I recently deployed an app that I've been working on. While I've been working on it, the PDFviewer has been working perfectly, showing PDFs both from Azure and locally uploaded through input. But once I deployed it to Heroku, instead of my PDFs it shows my own start page in the PDFviewer? Has anyone experienced something similar before? I am using Vite, I have the pdfjs web and build packages locally in public/lib. Would really appreciate some input in this issue :)

My code:

import { useState, useEffect } from "react";

function PDFJS({ fileUrl, searchText }) {
const [blobUrl, setBlobUrl] = useState(null);

useEffect(() => {
	if (fileUrl) {
		fetchPdfFromApi(fileUrl);
	}
}, [fileUrl]);

// Hämta PDF och skapa en Blob-URL
const fetchPdfFromApi = async (url) => {
	try {
		const response = await fetch(url);
		const blob = await response.blob();
		const fileURL = URL.createObjectURL(blob);
		setBlobUrl(fileURL);
	} catch (error) {
		console.error("Fel vid hämtning av PDF:", error);
	}
};

// Om en sökning finns, lägg till den i viewer-länken
const pdfViewerUrl = blobUrl
	? `/lib/web/viewer.html?file=${encodeURIComponent(blobUrl)}${
			searchText
				? `#search=${encodeURIComponent(searchText)}&phrase=true`
				: ""
	  }`
	: null;

return (
	<div className="App">
		<iframe
			id="pdf-js-viewer"
			src={pdfViewerUrl}
			title="webviewer"
			width="100%"
			height="800px"
			style={{ border: "none" }}
		></iframe>
	</div>
);

}

export default PDFJS;