TypeError: (reading 'hasOwnProperty') when using in docker container

[RageCrezz]

Describe the bug After implementing a PDF Viewer using the BlobProvider from this library, the page is not accessible and throws the error: TypeError: Cannot read properties of undefined (reading 'hasOwnProperty')

This does not happen if used via yarn dev, but it happens when using docker compose up. Versions in package.json:

"next": "rc",
"react": "rc",
"react-dom": "rc",
"react-pdf": "^9.0.0",
"@react-pdf/renderer": "^3.4.2",
"pdfjs-dist": "^4.3.136",
"@types/react-pdf": "^7.0.0",

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

1. Run NextJS app using "docker compose up"
2. Implement following code:

// PDFTemplate.tsx
import PDFViewer from '@/components/PDFViewer/PDFViewer'
import {
  BlobProvider,
  Document,
  Image,
  Page,
  Text,
  View,
} from '@react-pdf/renderer'
import Html from 'react-pdf-html'

const ContractTemplateDocument = ({}: {}): JSX.Element => {
  const [currentPage, setCurrentPage] = useState<number>(1)

  const goToPreviousPage = () => {
      setCurrentPage(prevPage => prevPage - 1)
  }

  const goToNextPage = () => {
      setCurrentPage((prev: number) => prev + 1)
  }

  const ContractTemplateDocument = (
      <Document>
          <Page size="A4" style={pdfStyles.page}>
              <Text>Hello world</Text>
          </Page>
      </Document>
    )

  return <BlobProvider document={ContractTemplateDocument}>
      {({ url, loading, error }) => {
        if (loading)
          return (
            <div className="...">
              <P>PDF wird gebaut...</P>
            </div>
          )

        if (error)
          return (
            <div className="... aspect-pdf">
              <P>Fehler beim Bauen der PDF Datei</P>
            </div>
          )
        if (url) {
          return (
            <PDFViewer
              pdfUrl={url}
              page={currentPage}
              prev={goToPreviousPage}
              next={goToNextPage}
            />
          )
        }
      }}
  </BlobProvider>
}

// PDFViewer.tsx

import 'pdfjs-dist/build/pdf.worker.min'
import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs'
import { useEffect, useRef, useState } from 'react'
import { Outline } from '../Button'
import { P } from '../Typography'
import { PDFViewerProps } from './PDFViewer.types'

const PDFViewer = ({
  pdfUrl,
  page,
  prev,
  next,
}: PDFViewerProps): JSX.Element => {
  const canvasRef = useRef<HTMLDivElement | null>(null)
  const [maxPage, setMaxPage] = useState<number>(1)

  useEffect(() => {
    const canvasDiv = canvasRef.current

    if (!canvasDiv) {
      return
    }

    const loadingTask = getDocument({
      url: pdfUrl,
    }) as any // Cast loadingTask to 'any'

    loadingTask.promise
      .then((pdfDocument: any) => {
        setMaxPage(pdfDocument.numPages)
        return pdfDocument.getPage(page)
      })
      .then((page: any) => {
        const viewport = page.getViewport({ scale: 1 })

        // Create a new canvas element
        const newCanvas = document.createElement('canvas')
        newCanvas.width = viewport.width
        newCanvas.height = viewport.height

        // Clear the previous canvas
        while (canvasDiv.firstChild) {
          canvasDiv.removeChild(canvasDiv.firstChild)
        }

        canvasDiv.appendChild(newCanvas)

        const renderContext = newCanvas.getContext('2d')

        if (renderContext) {
          page.render({ canvasContext: renderContext, viewport })
        }
      })
      .catch((error: any) => {
        console.error('Error rendering PDF:', error)
      })
  }, [page, pdfUrl])

  return (
    <div className="flex flex-col relative">
      <div className="w-full sticky top-2 left-0 right-0 flex flex-col gap-y-4">
        <div
          className="w-[595px] bg-white shadow-lg rounded-lg overflow-hidden aspect-pdf"
          ref={canvasRef}
        />

        <div className="flex flex-row justify-between items-center">
          <Outline label="Zurück" onClick={prev} disabled={page === 1} />
          <P>
            Seite {page}/{maxPage}
          </P>
          <Outline label="Weiter" onClick={next} disabled={page === maxPage} />
        </div>
      </div>
    </div>
  )
}

export default PDFViewer

3. Visit the page, where the component is being called
4. Error occurs

Expected behavior The page should load without this error.

Screenshots

Desktop (please complete the following information):

• OS: Windows, Fedora
• Browser: Brave
• React-pdf version: 9.0.0

[Yhozen]

It is not related to docker, it is due to newer versions of react not exporting the properly named __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED that is being used in $$$reconciler