diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index a9eb3e8c6..2e6c43a41 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -103,8 +103,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, ref, watch, computed } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { inject, ref, watch, computed, onMounted } from "vue";
 import injectionKeys from "../../injectionKeys";
 import "@tato30/vue-pdf/style.css";
 
@@ -112,7 +111,7 @@ type MatchType = { str: string; page: number; index: number };
 
 const fields = inject(injectionKeys.evaluatedFields);
 
-const { pdf, pages } = usePDF(fields.source);
+let pdf, pages, VuePDF;
 
 const highlightText = computed(() => {
 	return fields.highlights.value
@@ -136,6 +135,14 @@ const loading = ref(false);
 const pagesLoaded = ref(0);
 const highlightsList = ref([]);
 
+onMounted(async () => {
+	const VuePDFLib = await import("@tato30/vue-pdf");
+	VuePDF = VuePDFLib.VuePDF;
+	const usePDF = VuePDFLib.usePDF;
+	({ pdf, pages } = usePDF(fields.source));
+	reload();
+});
+
 const reload = () => {
 	loading.value = true;
 	pagesLoaded.value = 0;
@@ -218,6 +225,7 @@ const gotoHighlight = (matchIdx: number) => {
 		return;
 	}
 	const match = matches.value[matchIdx - 1];
+	if (!match) return;
 	const matchEls = rootEl.value.querySelectorAll(
 		`div[page='${match.page}'] span.highlight`,
 	);