Chrome 76 cannot work normally

[ZtfCoder]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I use react-pdf 6.2.2 but Chrome 76 cannot work normally

Chrome 76 cannot work normally

Steps to reproduce

no

Expected behavior

Normal display

Actual behavior

Normal display

Additional information

No response

Environment

• Browser (if applicable): chrome 76.0.3809.100
• React-PDF version: 6.2.2
• React version: react 17
• Bundler name and version (if applicable):next 12

[wojtekmaj]

I don't have access to your app, so the message you provided doesn't allow me to understand which line it's crashing on.

[ZtfCoder]

I don't have access to your app, so the message you provided doesn't allow me to understand which line it's crashing on.

Hello, I tried again and imported compatible ones according to the document pdfjs-dist/legacy/build/pdf.worker.min.mjs, But I am on Vite's local system, and the error message is still mine

is chrome 87
"react-pdf": "6.2.2",
I went to check the source code and found that it might be this code

This compatibility card has been stuck for a long time. If possible, could you please take a look at this issue? Thank you 🙏

[ZtfCoder]

/**
 * @Date: 2024-06-27 11:42:43
 * @Description: PDF预览
 * https://github.com/wojtekmaj/react-pdf/blob/v6.x/README.md
 */

import { useState } from "react";
import styles from "./index.module.scss";
import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
import { getYPCdnImgUrl } from "@yp/core/config";
import React from "react";
// pdfjs.GlobalWorkerOptions.workerSrc = getYPCdnImgUrl("wp/pdf.worker.min.js");
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
console.log(pdfjs.GlobalWorkerOptions.workerSrc);

const Loading = (props: { text?: string }) => {
  const text = props.text || "正在加载中";
  return (
    <div className={styles.loading}>
      <img src={getYPCdnImgUrl("wp/file_loading.svg")} alt={text} />
      <div className={styles.text}>{text}</div>
    </div>
  );
};

const PdfView = ({ url, width, ...other }: { url: string; width?: number }) => {
  const [numPages, setNumPages] = useState(0);
  const [pagesToRender, setPagesToRender] = useState([1]);

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages);
    setPagesToRender([1]); // 初始化时只渲染第一页
  };

  const loadMorePages = () => {
    setPagesToRender((prevPages) => {
      const nextPage = prevPages.length + 1;
      if (nextPage <= numPages) {
        return [...prevPages, nextPage];
      }
      return prevPages;
    });
  };

  return (
    <Document
      file={url}
      onLoadSuccess={onDocumentLoadSuccess}
      options={{
        cMapUrl: "https://cdn.yupaowang.com/yupao_hybrid_h5/pdf-cmaps/cmaps/",
        cMapPacked: true,
      }}
      className={styles.pdfBox}
      loading={<Loading />}
      error={<Loading text="预览失败，请稍后重试" />}
      {...other}
    >
      {pagesToRender.map((pageNumber) => (
        <Page
          key={`page_${pageNumber}`}
          onRenderSuccess={() => {
            loadMorePages();
          }}
          pageNumber={pageNumber}
          className={styles.page}
          width={width || 687}
          loading={<></>}
        />
      ))}
    </Document>
  );
};
export default PdfView;

[ZtfCoder]

I may already know why, it's because this tools.js uses the Array at method, but this method only supports Chrome 96 and above. How can I be compatible with this

[ZtfCoder]

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.