Cannot read properties of null (reading 'useReducer')

[harshmuriki]

Hello. I am trying to reader a pdf on my react app. I installed react-pdf through npm: npm install react-pdf and I have this basic code on my App.js file:

import { useState } from 'react';
import { Document, Page } from 'react-pdf';

function App() {
  const [numPages, setNumPages] = useState();
  const [pageNumber,] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <h1>pdf</h1>
      <Document file="test.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

export default App;

But when I run this, I get this error:

ERROR
Cannot read properties of null (reading 'useReducer')
TypeError: Cannot read properties of null (reading 'useReducer')
    at useReducer (http://localhost:3000/main.b0d60ad22d7698a61193.hot-update.js:20604:25)
    at useResolver (http://localhost:3000/main.b0d60ad22d7698a61193.hot-update.js:24002:59)
    at Document (http://localhost:3000/main.b0d60ad22d7698a61193.hot-update.js:21992:113)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:42869:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:45440:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:47487:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:32461:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:32505:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:32562:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:52436:11)

Is it my code that is wrong? Any help is appreciated!

[wojtekmaj]

Which React version are you on?

[harshmuriki]

18.2.0

[wojtekmaj]

Is that actually React app or Next.js app? If the latter, did you remember to add "use client" declaration?

[harshmuriki]

I mean theres is nothing in any of the files which says that it is Next.js. I have next.js in my laptop and I use it for some other projects. Could that be the reason?