react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard
verified publisher icon diegomura

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

Open RageCrezz opened this issue 1 year ago • 3 comments

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
  1. Visit the page, where the component is being called
  2. Error occurs

Expected behavior The page should load without this error.

Screenshots image image

Desktop (please complete the following information):

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

RageCrezz avatar Jun 13 '24 14:06 RageCrezz

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

Yhozen avatar Jul 01 '24 03:07 Yhozen

Any solutions on this yet?

AmitGurbani avatar Aug 21 '24 08:08 AmitGurbani

Did anyone find any solution?

siddiquiaffan avatar Oct 09 '24 05:10 siddiquiaffan

I imagine this issue will be cropping up a lot with Nextjs 15 releasing. Hopefully there is a fix soon

ck-euan avatar Oct 22 '24 12:10 ck-euan

Yes on Next.js 15 the same issue in any mode. Some libs fixed, @diegomura could you fix this for react-pdf?

Kiborgik avatar Oct 22 '24 23:10 Kiborgik

There is a PR which updates this package to work with React 19: https://github.com/diegomura/react-pdf/pull/2783 You could use the forked package for now until this gets merged @alexandernanberg/@react-pdf/renderer

ck-euan avatar Oct 23 '24 12:10 ck-euan

There is a PR which updates this package to work with React 19: #2783 You could use the forked package for now until this gets merged @alexandernanberg/@react-pdf/renderer

it seems that fork only works for React 19, but in a Nextjs 15 app, it still shows some error and does not work

ringge avatar Oct 28 '24 12:10 ringge

@ringge yes, didn't work with nextjs 15 and react 19. Getting this error now

⨯ TypeError: Cannot read properties of undefined (reading 'S')
    at module.exports (/.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:14494:67)
    at createRenderer (/.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:14980:12)
    at pdf (/.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:15180:28)
    at renderToStream (/.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:15311:22)

jpainam avatar Oct 31 '24 14:10 jpainam

sadly @alexandernanberg/@react-pdf/renderer doesnt work withnext15

POST` /api/pdf 500 in 2778ms
 ⨯ RangeError: Invalid status code: 0
    at ServerResponse.writeHead (node:_http_server:352:11)
    at ServerResponse._implicitHeader (node:_http_server:338:8)
TypeError: Cannot read properties of undefined (reading 'S')
    at module.exports (turbopack://[project]/node_modules/node_modules/react-reconciler/cjs/react-reconciler.development.js:15835:58)
    at ReactFiberReconciler (turbopack://[project]/node_modules/@alexandernanberg/react-pdf-renderer/src/renderer.js:32:9)
    at createRenderer (turbopack://[project]/node_modules/@alexandernanberg/react-pdf-renderer/src/index.js:33:25)
    at pdf (turbopack://[project]/node_modules/@alexandernanberg/react-pdf-renderer/src/node/renderTo.js:11:19)
    at POST (turbopack://[project]/src/app/api/pdf/fdv/route.tsx:39:43)
    at async AppRouteRouteModule.do (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/dist/compiled/next-server/dist/src/server/route-modules/app-route/module.ts:525:14)
    at async AppRouteRouteModule.handle (file:///C:/Users/<user>/Documents/GitHub/project/node_
modules/next/dist/compiled/next-server/dist/src/server/route-modules/app-route/module.ts:652:30)
    at async doRender (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:2570:29)
    at async responseGenerator (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3066:21)
    at async DevServer.renderToResponseWithComponentsImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3121:23)
    at async DevServer.renderPageComponent (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3676:15)
    at async DevServer.renderToResponseImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3738:23)
    at async DevServer.pipeImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:1738:20)
    at async NextNodeServer.handleCatchallRenderRequest (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/next-server.ts:1032:6)
    at async DevServer.handleRequestImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:1498:8)
    at async (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/dev/next-dev-server.ts:514:13)
    at async Span.traceAsyncFn (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/trace/trace.ts:143:13)
    at async DevServer.handleRequest (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/dev/next-dev-server.ts:512:19)
    at async invokeRender (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/router-server.ts:284:10)
    at async handleRequest (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/router-server.ts:530:15)
    at async requestHandlerImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/router-server.ts:576:6)
    at async Server.requestListener (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/start-server.ts:146:6)
  15833 |         _currentRenderer2: null
  15834 |       },
> 15835 |       prevOnStartTransitionFinish = ReactSharedInternals.S;
        |                                                          ^
  15836 |     ReactSharedInternals.S = function (transition, returnValue) {
  15837 |       "object" === typeof returnValue &&
  15838 |         null !== returnValue &&
RangeError: Invalid status code: 0
    at ServerResponse.writeHead (C:\Users\<user>\Documents\GitHub\project\node_modules\next\dist\compiled\compression\index.js:46:263)
    at ServerResponse.end (C:\Users\<user>\Documents\GitHub\project\node_modules\next\dist\compiled\compression\index.js:22:749)
    at end (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/send-response.ts:71:23)
    at req (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:2619:14)
    at async responseGenerator (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3066:21)
    at async DevServer.renderToResponseWithComponentsImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3121:23)
    at async DevServer.renderPageComponent (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3676:15)
    at async DevServer.renderToResponseImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:3738:23)
    at async DevServer.pipeImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:1738:20)
    at async NextNodeServer.handleCatchallRenderRequest (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/next-server.ts:1032:6)
    at async DevServer.handleRequestImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/base-server.ts:1498:8)
    at async (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/dev/next-dev-server.ts:514:13)
    at async Span.traceAsyncFn (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/trace/trace.ts:143:13)
    at async DevServer.handleRequest (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/dev/next-dev-server.ts:512:19)
    at async invokeRender (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/router-server.ts:284:10)
    at async handleRequest (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/router-server.ts:530:15)
    at async requestHandlerImpl (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/router-server.ts:576:6)
    at async Server.requestListener (file:///C:/Users/<user>/Documents/GitHub/project/node_modules/next/src/server/lib/start-server.ts:146:6) {
  code: 'ERR_HTTP_INVALID_STATUS_CODE'
}

heggland avatar Nov 08 '24 13:11 heggland