Search isn't working with updated package

[akib1997]

I'm using the updated package and wanted to implement searching functionality and I'm gating an error like TypeError: Cannot read properties of undefined (reading 'map')
at search.js:151:1 when submitting enter button for searching.

Package:

Component:

import { Viewer, Worker } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import { pageNavigationPlugin } from "@react-pdf-viewer/page-navigation";
import { searchPlugin } from '@react-pdf-viewer/search';

// import PDFList from './components/PDFList';


function App() {
  // const data: IPDFList[] = Data
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  const searchPluginInstance = searchPlugin();
  const pageNavigationPluginInstance = pageNavigationPlugin();
  const { ShowSearchPopoverButton } = searchPluginInstance;
  const {
    CurrentPageInput,
    GoToFirstPageButton,
    GoToLastPageButton,
    GoToNextPageButton,
    GoToPreviousPage
  } = pageNavigationPluginInstance;
  const currentPage = localStorage.getItem("current-page");
  const initialPage = currentPage ? parseInt(currentPage, 10) : 0;

  const handlePageChange = (e: any) => {
    localStorage.setItem("current-page", `${e.currentPage}`);
  };


  return (
    <>
      <div className="p-4">
        <div className='max-w-4xl w-full mx-auto'>
          <h1 className='text-4xl text-center mt-4 mb-7 font-bold text-purple-600'>PDF Read and Search</h1>
          {/* <PDFList lists={data} /> */}
          <div className="">
            <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.14.305/build/pdf.worker.min.js">

              <div
                className="rpv-core__viewer flex flex-col h-full border border-solid border-black border-opacity-30"

              >
                <div className='flex items-center bg-[#eeeeee] border-b border-black border-opacity-10 p-1'>
                  <ShowSearchPopoverButton />
                  <div className='px-1'>
                    <GoToFirstPageButton />
                  </div>
                  <div className='px-1'>
                    <GoToPreviousPage />
                  </div>
                  <div className='px-1'>
                    <CurrentPageInput />
                  </div>
                  <div className='px-1'>
                    <GoToNextPageButton />
                  </div>
                  <div className='px-1'>
                    <GoToLastPageButton />
                  </div>
                </div>
                <div className='flex-1 overflow-hidden'></div>
                <div className='h-[30rem]'>
                  <Viewer
                    fileUrl={`/recources/Angular_Router_Crash_Course.pdf`}
                    initialPage={initialPage}
                    onPageChange={handlePageChange}
                    plugins={[searchPluginInstance, pageNavigationPluginInstance]}
                    defaultScale={1}
                  />
                </div>
              </div>

            </Worker>
          </div>

        </div>
      </div>

    </>
  );
}

export default App;

[phuocng]

@akib1997 All packages should use the same version.
You should update @react-pdf-viewer/core to 3.5.0.

[akib1997]

@akib1997 All packages should use the same version. You should update @react-pdf-viewer/core to 3.5.0.

All are updated now but still getting this error. Even searching isn't working anyway. Just getting this.

[akib1997]

My project link is:
Sorry I couldn't add it to stackblitz or codesendbox.

https://github.com/akib-bs23/bopm

[joshkay]

Getting the same error on my end.

[joshkay]

Looks like this has to do trying to highlight text on a PDF that doesn't contain any highlightable text. Downgraded to 3.3.0 and the crash is fixed.

[phuocng]

@joshkay Can you let me know the steps to reproduce the issue?

[joshkay]

Unfortunately I am unable to share the PDFs that were causing issues for me. They were scanned documents with no selectable text. I was also experiencing an issue where the first page would often render as just a black box. Unfortunately I don't have the time to come up with a reproducable scenario. The downgrade has solved all my issues. Sorry I can't provide more context.

[akib1997]

Looks like this has to do trying to highlight text on a PDF that doesn't contain any highlightable text. Downgraded to 3.3.0 and the crash is fixed.

Can I know all the package versions? Did you use Typescript? Please give me a screenshot of your package.

Thanks

[joshkay]

No typescript, just regular js.

Screenshot of the error:

Package versions:

[joshkay]

Looks like the highlightAreas prop is undefined.

[akib1997]

Looks like this has to do trying to highlight text on a PDF that doesn't contain any highlightable text. Downgraded to 3.3.0 and the crash is fixed.

Can I see your working package json file or image. I want to use the same version of you.

[joshkay]

These are working for me currently.

"@react-pdf-viewer/core": "3.3.0",
"@react-pdf-viewer/default-layout": "3.3.0",
"@react-pdf-viewer/highlight": "3.3.0",

[akib1997]

These are working for me currently.

"@react-pdf-viewer/core": "3.3.0",
"@react-pdf-viewer/default-layout": "3.3.0",
"@react-pdf-viewer/highlight": "3.3.0",

I got it but wanted to know React and React-dom versions like things.

[joshkay]

"@ag-grid-community/all-modules": "^27.3.0",
"@ag-grid-community/react": "^27.3.0",
"@ag-grid-enterprise/all-modules": "^27.3.0",
"@bryntum/gantt": "^5.0.5",
"@bryntum/gantt-react": "^5.0.5",
"@craco/craco": "^6.4.3",
"@date-io/moment": "^2.14.0",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.8.2",
"@mui/lab": "^5.0.0-alpha.84",
"@mui/material": "^5.8.2",
"@mui/styles": "^5.8.0",
"@nivo/bar": "^0.79.1",
"@nivo/core": "^0.79.0",
"@nivo/line": "^0.79.1",
"@nivo/pie": "^0.79.1",
"@react-pdf-viewer/core": "3.3.0",
"@react-pdf-viewer/default-layout": "3.3.0",
"@react-pdf-viewer/highlight": "3.3.0",
"@react-pdf/renderer": "^2.1.2",
"ag-charts-community": "^5.3.0",
"ag-charts-react": "^5.3.0",
"assert": "^2.0.0",
"axios": "^0.27.2",
"browserify-zlib": "^0.2.0",
"classnames": "^2.3.1",
"core-js": "^3.22.8",
"env-cmd": "^10.1.0",
"flag-icons": "^6.4.4",
"http-proxy-middleware": "^2.0.6",
"intro.js": "^5.1.0",
"intro.js-react": "^0.6.0",
"lodash.debounce": "^4.0.8",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.2",
"lodash.union": "^4.6.0",
"material-ui-confirm": "^3.0.4",
"moment": "^2.29.3",
"normalizr": "^3.6.2",
"pdfjs-dist": "^2.14.305",
"re-reselect": "^4.0.0",
"react": "^18.1.0",
"react-app-polyfill": "^3.0.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.1.0",
"react-dropzone": "^12.0.5",
"react-grid-layout": "^1.3.4",
"react-helmet": "^6.1.0",
"react-number-format": "^4.9.3",
"react-pdf": "^5.7.2",
"react-redux": "^8.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-sizeme": "^3.0.2",
"react-split": "^2.0.14",
"react-virtualized": "^9.22.3",
"react-window": "^1.8.7",
"redux": "^4.2.0",
"redux-form": "^8.3.8",
"redux-thunk": "^2.4.1",
"reselect": "^4.1.5",
"resize-observer-polyfill": "^1.5.1",
"sass": "^1.52.2",
"socket.io-client": "^4.5.1",
"source-map-explorer": "^2.5.2",
"stream-browserify": "^3.0.0",
"typeface-karla": "^1.1.13",
"typeface-roboto": "^1.1.13",
"url": "^0.11.0",
"util": "^0.12.4",
"uuid": "^8.3.2"

[akib1997]

There is a lot but thanks, man. I really appreciate it.

[phuocng]

@joshkay @akib1997
v3.6.0 is released. Please upgrade. It fixes the issue.