Unable to get the textlayer aligned to the canvas, so that text overlays and text selection work perfectly in Nextjs 15

[heinergiehl]

I am not able to import the pdf_viewer.css which is important for the textLayer as I have heard.
The error I am getting then is:

`⨯ Error: Failed to load external module next/dist/compiled/next-server/pages.runtime.dev.js: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in C:\Users\Heiner\botfiles\node_modules\react-dom\package.json
at externalRequire (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:362:15)
at Object. (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:26:13)
at [externals]/ [external] (next/dist/compiled/next-server/pages.runtime.dev.js, cjs) (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628._.js:30:3)
at instantiateModule (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:575:23)
at getOrInstantiateModuleFromParent (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:628:12)
at commonJsRequire (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:146:20)
at Object. (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:1368:26)
at [project]/node_modules/next/dist/server/route-modules/pages/module.compiled.js [ssr] (ecmascript) (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:1374:3)
at instantiateModule (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:575:23)
at getOrInstantiateModuleFromParent (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:628:12)
at commonJsRequire (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:146:20)
at Object. (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:1378:18)
at [project]/node_modules/next/dist/server/route-modules/pages/vendored/contexts/html-context.js [ssr] (ecmascript) (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:1380:3)
at instantiateModule (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:575:23)
at getOrInstantiateModuleFromParent (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:628:12)
at commonJsRequire (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:146:20)
at Object. (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:1604:35)
at [project]/node_modules/next/dist/pages/document.js [ssr] (ecmascript) (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:2384:3)
at instantiateModule (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:575:23)
at getOrInstantiateModuleFromParent (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:628:12)
at commonJsRequire (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]runtime.js:146:20)
at Object. (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:2387:18)
at [project]/node_modules/next/document.js [ssr] (ecmascript) (C:\Users\Heiner\botfiles.next\server\chunks\ssr[root of the server]__aad628..js:2389:3)
at instantiateModule (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:575:23)
at instantiateRuntimeModule (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:636:12)
at Object.getOrInstantiateRuntimeModule (C:\Users\Heiner\botfiles.next\server\chunks\ssr[turbopack]_runtime.js:651:12)
at Object. (C:\Users\Heiner\botfiles.next\server\pages_document.js:4:26)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)
at mod.require (C:\Users\Heiner\botfiles\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:135:16)
at requirePage (C:\Users\Heiner\botfiles\node_modules\next\dist\server\require.js:105:84)
at loadComponentsImpl (C:\Users\Heiner\botfiles\node_modules\next\dist\server\load-components.js:72:38)
at DevServer.findPageComponentsImpl (C:\Users\Heiner\botfiles\node_modules\next\dist\server\next-server.js:724:77)
at C:\Users\Heiner\botfiles\node_modules\next\dist\server\next-server.js:703:21
at C:\Users\Heiner\botfiles\node_modules\next\dist\server\lib\trace\tracer.js:173:36
at NoopContextManager.with (C:\Users\Heiner\botfiles\node_modules@opentelemetry\api\build\src\context\NoopContextManager.js:25:19)
at ContextAPI.with (C:\Users\Heiner\botfiles\node_modules@opentelemetry\api\build\src\api\context.js:60:46)
at NoopTracer.startActiveSpan (C:\Users\Heiner\botfiles\node_modules@opentelemetry\api\build\src\trace\NoopTracer.js:65:31)
at ProxyTracer.startActiveSpan (C:\Users\Heiner\botfiles\node_modules@opentelemetry\api\build\src\trace\ProxyTracer.js:36:24)
at C:\Users\Heiner\botfiles\node_modules\next\dist\server\lib\trace\tracer.js:155:103
at NoopContextManager.with (C:\Users\Heiner\botfiles\node_modules@opentelemetry\api\build\src\context\NoopContextManager.js:25:19)
at ContextAPI.with (C:\Users\Heiner\botfiles\node_modules@opentelemetry\api\build\src\api\context.js:60:46)
at NextTracerImpl.trace (C:\Users\Heiner\botfiles\node_modules\next\dist\server\lib\trace\tracer.js:155:28)
at DevServer.findPageComponents (C:\Users\Heiner\botfiles\node_modules\next\dist\server\next-server.js:698:41)
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in C:\Users\Heiner\botfiles\node_modules\react-dom\package.json
at exportsNotFound (node:internal/modules/esm/resolve:296:10)
at packageExportsResolve (node:internal/modules/esm/resolve:643:9)
at resolveExports (node:internal/modules/cjs/loader:639:36)
at Module._findPath (node:internal/modules/cjs/loader:747:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1234:27)
at C:\Users\Heiner\botfiles\node_modules\next\dist\server\require-hook.js:55:36
at Module._load (node:internal/modules/cjs/loader:1074:27)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)
at mod.require (C:\Users\Heiner\botfiles\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:135:16)
at C:\Users\Heiner\botfiles\node_modules\next\dist\compiled\next-server\pages.runtime.dev.js:14:31773
at C:\Users\Heiner\botfiles\node_modules\next\dist\compiled\next-server\pages.runtime.dev.js:36:1306
at Object. (C:\Users\Heiner\botfiles\node_modules\next\dist\compiled\next-server\pages.runtime.dev.js:36:1345)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)
at mod.require (C:\Users\Heiner\botfiles\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:135:16)
at Object. (C:\Users\Heiner\botfiles\node_modules\next\dist\server\route-modules\pages\module.compiled.js:6:26)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)
at mod.require (C:\Users\Heiner\botfiles\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:135:16)
at Object. (C:\Users\Heiner\botfiles\node_modules\next\dist\server\route-modules\pages\vendored\contexts\html-context.js:2:18)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)
at mod.require (C:\Users\Heiner\botfiles\node_modules\next\dist\server\require-hook.js:63:32)
at require (node:internal/modules/helpers:135:16)
at Object. (C:\Users\Heiner\botfiles\node_modules\next\dist\pages_document.js:44:35)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'

}`

This is my main component responsible for the main-PDF-functionality:
"use client" import React, { useEffect, useState, useRef } from "react" import { ScrollArea } from "./ui/scroll-area" import { Button } from "./ui/button" import * as pdfjsLib from "pdfjs-dist" import "pdfjs-dist/web/pdf_viewer.css" type PdfViewerProps = { pdfUrl: string } const PdfViewer = ({ pdfUrl }: PdfViewerProps) => { const canvasRef = useRef<HTMLCanvasElement | null>(null) const textLayerRef = useRef<HTMLDivElement | null>(null) // For rendering the text layer const [numPages, setNumPages] = useState<number>(0) const [currentPage, setCurrentPage] = useState<number>(1) useEffect(() => { const loadPdf = async () => { pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs" const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise setNumPages(pdfDoc.numPages) const renderPage = async (pageNum: number) => { const page = await pdfDoc.getPage(pageNum) const viewport = page.getViewport({ scale: 1.5 }) // Render PDF page on canvas const canvas = canvasRef.current const context = canvas?.getContext("2d") if (canvas && context) { canvas.height = viewport.height canvas.width = viewport.width const renderContext = { canvasContext: context, viewport: viewport, } await page.render(renderContext).promise } // Render the text layer for interactivity (text selection) const textContent = await page.getTextContent() const textLayerDiv = textLayerRef.current textLayerDiv?.setAttribute("style", width: ${viewport.width}px) textLayerDiv?.setAttribute("style", height: ${viewport.height}px) canvas?.setAttribute("style", height: ${viewport.height}px) canvas?.setAttribute("style", width: ${viewport.width}px) if (textLayerDiv) { textLayerDiv.innerHTML = "" // Clear previous text layer content const textLayer = new pdfjsLib.TextLayer({ textContentSource: textContent, container: textLayerDiv, viewport: viewport, }) textLayer.render() } } // Render the first page initially renderPage(currentPage) } loadPdf() }, [pdfUrl, currentPage]) const goToNextPage = () => { if (currentPage < numPages) { setCurrentPage(currentPage + 1) } } const goToPrevPage = () => { if (currentPage > 1) { setCurrentPage(currentPage - 1) } } return ( <> <div className="relative pdf-content"> <canvas ref={canvasRef} id=" " /> <div ref={textLayerRef} className="textLayer "></div> </div> <div className="flex justify-center space-x-2 mt-4"> <Button className="p-2 rounded-md" onClick={goToPrevPage} disabled={currentPage === 1} > Previous </Button> <span className="text-sm "> Page {currentPage} of {numPages} </span> <Button className="p-2 rounded-md" onClick={goToNextPage} disabled={currentPage === numPages} > Next </Button> </div> </> ) } export default PdfViewer

To avoid the error mentioned earlier, let's get rid off import "pdfjs-dist/web/pdf_viewer.css":

And as you can see the TextLayer ist totally messed up.
How do we get this working perfectly? The text layer must fit perfectly with all the necessary styling and also textSelection must work.

At some point I had improve it with my own custom CSS, the textoverlay was alignin, but the text selection was still buggy as hell.
Any idea on how to improve this?

Thx a lot <3