PDF showing extra content .

[AbdulMoizKhan]

The original contents are displayed then it repeats in the same document the broken text of the same PDF is displayed under the original document.

PDFs worked fine for a time this issue is showing just now

`{ LinkLoading ? ( "" ) : (

                    )}`

This is how the code is written for the PDF

[codeholmes]

I'm encountering the same issue. When I click on the next page button, it shows the right content/page, but when I scroll from 1st page to down, I see the same content (from page 1) regenerated weirdly. Is it because of recent updates? I can go back to the previous version if that solves the issue.

Screenshot: Page 1 without scroll (Left image) & After scroll (Right image)

Code:

<div className='h-[74vh] w-full'>
    <DocViewer
        documents={[
            {
                uri: 'https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf',
            },
        ]}
        key={viewerKey}
        config={{
            header: {
                disableHeader: true,
                disableFileName: true,
                retainURLParams: false,
            },
            pdfZoom: {
                defaultZoom: 1.1,
                zoomJump: 0.2,
            },
            pdfVerticalScrollByDefault: false,
        }}
        pluginRenderers={
            DocViewerRenderers
        }
    />
</div>

[domvo]

Same issue here, I think it has to do with with version react-pdf. It is required as latest in this repo's dependencies and recently had a breaking changes update to v8. Downgrading to @cyntler/react-doc-viewer@1.14.1 did the trick for us.

This is, however an issue, that should be addressed.

[AbdulMoizKhan]

i found a temporary fix. just downgrade your version to this . "@cyntler/react-doc-viewer": "1.10.3", until it is fixed on latest @domvo @codeholmes

[Aliouzidouh]

No need to downgrade, I also had the same issue. I worked around the problem by targeting the CSS class of the duplicate text and setting the display to none.

@domvo @codeholmes @AbdulMoizKhan

[mxylin]

This issue can be fixed for me by adding the following two lines to my code.

import "react-pdf/dist/Page/AnnotationLayer.css";
import "react-pdf/dist/Page/TextLayer.css";

These lines was removed by this commit: https://github.com/cyntler/react-doc-viewer/commit/9545290fe29c3a9a85e3ca1d0760d96467557a00

[cyntler]

@mxylin We can't import CSS directly in library code because of Next.js error: "Global CSS cannot be imported from within node_modules.". I know, Next.js fixed this problem right now and in recent versions such import will work, but not in all...

The library should export a separate CSS file that contains these two files for the PDF render and import MANUALLY in the application. I'm working on it.

[JunaidKhan444]

Encountering the same issue. While installing the package, I am getting warnings; it looks like it has to do with react-pdf.

[cyntler]

Try to use the latest version (1.16.2) and use it line in your projects: https://github.com/cyntler/react-doc-viewer?tab=readme-ov-file#required-styles

[mxylin]

Try to use the latest version (1.16.2) and use it line in your projects: https://github.com/cyntler/react-doc-viewer?tab=readme-ov-file#required-styles

Thank you very much @cyntler for releasing 1.16.2, which fixes the [ERR_MODULE_NOT_FOUND] problem (https://github.com/cyntler/react-doc-viewer/issues/262#issuecomment-2143062003) for my project.

But when I move on to

import "@cyntler/react-doc-viewer/dist/index.css";

it gives the following error

Module not found: Package path ./dist/index.css is not exported from package **<project>**/node_modules/@cyntler/react-doc-viewer (see exports field in **<project>**/node_modules/@cyntler/react-doc-viewer/package.json)

  3 | import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
> 4 | import "@cyntler/react-doc-viewer/dist/index.css";
    | ^

https://nextjs.org/docs/messages/module-not-found

Can you please check this? Thank you very much

[mxylin]

I found a similar issue here: https://stackoverflow.com/questions/76198356/module-not-found-error-package-path-dist-style-css-is-not-exported-from-pack/76202111#76202111

Trying to add "./dist/index.css" to "exports" in packages.json file solves this issue in my local dev environment

# file: **<project>**/node_modules/@cyntler/react-doc-viewer/package.json
  "exports": {
    ".": {
      "require": "./dist/react-doc-viewer.cjs",
      "import": "./dist/react-doc-viewer.js",
      "types": "./dist/index.d.ts"
    },
    "./dist/index.css": {
        "import": "./dist/index.css",
        "require": "./dist/index.css"
    }
  },

[cyntler]

I found a similar issue here: https://stackoverflow.com/questions/76198356/module-not-found-error-package-path-dist-style-css-is-not-exported-from-pack/76202111#76202111

Trying to add "./dist/index.css" to "exports" in packages.json file solves this issue in my local dev environment

# file: **<project>**/node_modules/@cyntler/react-doc-viewer/package.json
  "exports": {
    ".": {
      "require": "./dist/react-doc-viewer.cjs",
      "import": "./dist/react-doc-viewer.js",
      "types": "./dist/index.d.ts"
    },
    "./dist/index.css": {
        "import": "./dist/index.css",
        "require": "./dist/index.css"
    }
  },

Oh, thanks! I’ll implement it!

[cyntler]

1.16.3 has been released! It should be working right now!

[designlook]

@cyntler hmm.. i tried with new version but that did not fix it. I had to do

import "react-pdf/dist/Page/AnnotationLayer.css"; import "react-pdf/dist/Page/TextLayer.css";

[cyntler]

@designlook Have you tried: import "@cyntler/react-doc-viewer/dist/index.css";, right?