AbortError: signal is aborted without reason

[supananplus]

AbortError: signal is aborted without reason

Firstly, I must say that react-pdf has been incredibly helpful and has greatly assisted me.
I'd like to express my gratitude for that. However, I've encountered an issue with an 'abort signal' error. Upon researching methods to resolve this error, I discovered that it may be occurring due to the large size of my PDF file. Additionally, I suspect that attempting to render a new PDF file while the previous one is still rendering could trigger this error, although I'm not entirely certain. Has anyone else experienced a similar issue, or does anyone have suggestions for resolving this error?

This is how I implement to my project:

// "use client"
import { Box, Button, Card, CardContent, Chip, Divider, IconButton, Typography } from "@mui/material"
import { useEffect, useRef, useState } from "react"
import { Document, Page, pdfjs } from "react-pdf"
import { tokens } from "src/theme/colors"
import { Scrollbar } from "../scrollbar"
import { ZoomIn, ZoomOut } from "@mui/icons-material"

// import dynamic from "next/dynamic"

// const PDFWithNoSSR = dynamic(() => import("../exam/pdf.js"), {
//   loading: () => <Typography>Loading...</Typography>,
// })

// pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.js", import.meta.url).toString()

const PDF = ({ file, name }) => {
  const colors = tokens()

  const [numPages, setNumPages] = useState(null)
  const [pagesRendered, setPagesRendered] = useState(1)
  const [scale, setScale] = useState(0.6)

  const containerRef = useRef()

  useEffect(() => {
    pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.js", import.meta.url).toString()
  }, [])

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages)
    setPagesRendered(0)
  }

  const onRenderSuccess = () => {
    setPagesRendered((prevPagesRendered) => prevPagesRendered + 1)
  }

  const zoomIn = () => {
    setScale(scale + 0.1)
  }

  const zoomOut = () => {
    setScale(scale - 0.1)
  }

  return (
    <Box>
      <Box sx={{ bgcolor: colors.grey[100], p: "13px", borderRadius: "20px", height: "55px", position: "sticky", top: "64px", mb: 2, zIndex: "1000" }}>
        <Box display="flex" flexDirection="row" justifyContent="space-between">
          <Box display="flex" gap={2}>
            <Chip label={name} variant="outlined" color="primary" sx={{ fontSize: "0.875rem", fontWeight: "700" }} />
          </Box>
          <Box display="flex">
            <IconButton sx={{ py: 0 }} onClick={zoomIn}>
              <ZoomIn color="primary" />
            </IconButton>
            <Divider orientation="vertical"></Divider>
            <IconButton sx={{ py: 0 }} onClick={zoomOut}>
              <ZoomOut color="primary" />
            </IconButton>
          </Box>
        </Box>
      </Box>
      <Card>
        <CardContent>
          <Scrollbar>
            <Box mt={3}>
              <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
                {Array.from(new Array(numPages), (el, index) => (
                  <Page key={`page_${index + 1}`} scale={scale} pageNumber={index + 1} renderAnnotationLayer={false} renderTextLayer={false} />
                ))}
              </Document>
            </Box>
          </Scrollbar>
        </CardContent>
      </Card>
    </Box>
  )
}

export default PDF

I've actually decided to render each page of the PDF when scrolling, but I'm unsure of how to proceed and haven't been able to find a solution.

fyi: I use NextJS with Material UI

[wojtekmaj]

Well, for starters, setting workerSrc in useEffect looks shady. useEffect fires after render is committed, so technically, React-PDF might already be rendering, or at least trying to.

[supananplus]

Thanks for your reply!
According to my code, I attempted to set 'workerSrc' as you provided in the documentation, but I encountered an error consistently. Do you have any solutions for this?

[supananplus]

I've already found the solution to fix the 'url.replace' error, but I'm still encountering an 'AbortError: signal is aborted without reason"

This is my updated code:

import React, { useState } from "react"
import { Document, Page, pdfjs } from "react-pdf"

import { Box, Card, CardContent, Chip, Divider, IconButton } from "@mui/material"
import { Scrollbar } from "../scrollbar"
import { ZoomIn, ZoomOut } from "@mui/icons-material"
import { tokens } from "src/theme/colors"

pdfjs.GlobalWorkerOptions.workerSrc = new URL("node_modules/pdfjs-dist/build/pdf.worker.min.js", import.meta.url).toString()

const PDF = ({ file, name }) => {
  const colors = tokens()
  const [numPages, setNumPages] = useState()
  const [scale, setScale] = useState(0.6)

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages)
  }

  const zoomIn = () => {
    setScale(scale + 0.1)
  }

  const zoomOut = () => {
    setScale(scale - 0.1)
  }

  return (
    <Box>
      <Box sx={{ bgcolor: colors.grey[100], p: "13px", borderRadius: "20px", height: "55px", position: "sticky", top: "64px", mb: 2, zIndex: "1000" }}>
        <Box display="flex" flexDirection="row" justifyContent="space-between">
          <Box display="flex" gap={2}>
            <Chip label={name} variant="outlined" color="primary" sx={{ fontSize: "0.875rem", fontWeight: "700" }} />
          </Box>
          <Box display="flex">
            <IconButton sx={{ py: 0 }} onClick={zoomIn}>
              <ZoomIn color="primary" />
            </IconButton>
            <Divider orientation="vertical" />
            <IconButton sx={{ py: 0 }} onClick={zoomOut}>
              <ZoomOut color="primary" />
            </IconButton>
          </Box>
        </Box>
      </Box>
      <Card>
        <CardContent>
          <Scrollbar>
            <Box mt={3}>
              <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
                {Array.from(new Array(numPages), (el, index) => (
                  <Page key={`page_${index + 1}`} scale={scale} pageNumber={index + 1} renderAnnotationLayer={false} renderTextLayer={false} />
                ))}
              </Document>
            </Box>
          </Scrollbar>
        </CardContent>
      </Card>
    </Box>
  )
}

export default PDF

[wojtekmaj]

Hmmmm, weird that I'm not getting it in my sample app (included in this repo)! Perhaps you're on an older version of Node, or Next.js itself? I'd love to know what the difference in our setups is.

For now though, I'd suggest something like

if (typeof window !== 'undefined') {
  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.js',
    import.meta.url,
  ).toString();
}

this would prevent it from running on the server, while still running before render on the client.

[Coomar25]

i'm also getting the same issue with react docs view

import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
import { GiCancel } from "react-icons/gi";
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 800,
height: 800,
bgcolor: "background.paper",
border: "0px solid #000",
boxShadow: 48,
p: 4,
borderRadius: 4,
};

export default function DocsViewer(userdocs) {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

const docs = [
{
uri: "https://cdn.pixabay.com/photo/2024/05/26/10/15/bird-8788491_1280.jpg",
},
{
uri: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736881_640.jpg",
},
];

return (

View Docs








{/* <Typography id="modal-modal-description" sx={{ mt: 2 }}>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
*/}

);
}

Uncaught runtime errors:
×
ERROR
signal is aborted without reason
at http://localhost:3000/static/js/bundle.js:127986:18
at safelyCallDestroy (http://localhost:3000/static/js/bundle.js:148928:9)
at commitHookEffectListUnmount (http://localhost:3000/static/js/bundle.js:149066:15)
at invokePassiveEffectUnmountInDEV (http://localhost:3000/static/js/bundle.js:150842:17)
at invokeEffectsInDev (http://localhost:3000/static/js/bundle.js:152693:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3000/static/js/bundle.js:152672:11)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:152449:9)
at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:152388:18)
at commitRootImpl (http://localhost:3000/static/js/bundle.js:152347:9)
at commitRoot (http://localhost:3000/static/js/bundle.js:152130:9)