Document options not working

[samuliasmala]

Before you start - checklist

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

Description

In version 7.0.3 verbosity was added to options prop in Document component. However adding that option will throw an error.

Steps to reproduce

Use verbosity option in Document options:

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

<Document
  file={data}
  options={{ verbosity: pdfjs.VerbosityLevel.ERRORS }}
>
  <Page pageNumber={1} />
</Document>

Expected behavior

The document is displayed.

Actual behavior

I get TypeError: Cannot perform Construct on a detached ArrayBuffer error:

Additional information

If the options={{ verbosity: pdfjs.VerbosityLevel.ERRORS }} is removed everything works nicely.

Environment

• Browser (if applicable):
• React-PDF version: 7.1.1
• React version: 18.2.0
• Webpack version (if applicable):

[wojtekmaj]

Please don't inline options prop value, or memoize it if you absolutely have to specify it inside render function. It's likely your error will be gone. Refer to official documentation and samples for examples.

[samuliasmala]

Yes, defining the options prop outside of the render function indeed fixed the problem! Thanks. Maybe the documentation should be updated that it's not just a performance reason to define the options object outside of the React component but it's actually mandatory for it to work?

[wojtekmaj]

I've recently made it clearer to guide people on the right track, but perhaps it could be even better indeed. Glad it resolved your problem though.