React PDF Viewer Recommendations

Development Plone 6 UI (Volto)
,
1

Good morning, Plone Community!

I have been using a third-party react pdf viewer to render pdf files uploaded by the end-user in my volto site. Unfortunately, it was setup in a way in which it uses an external cdn. The code I used is below:

import React from 'react';
import { Container } from 'semantic-ui-react';
// Core viewer
import { Viewer } from '@react-pdf-viewer/core';
import { Worker } from '@react-pdf-viewer/core';
// Plugins
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
// Import styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import YCImageView from '../YCImageView/YCImageView';
import { flattenToAppURL } from '../../helpers/Url/Url';

const PDFViews = ({ file }) => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  return (
    <Container>
      <Worker
        workerUrl={flattenToAppURL(
          'https://unpkg.com/pdfjs-dist@2.6.347/build/pdf.worker.min.js',
        )}
      >
        <Viewer
          fileUrl={flattenToAppURL(file)}
          plugins={[defaultLayoutPluginInstance]}
        />
      </Worker>
      <YCImageView file={flattenToAppURL(file)} />
    </Container>
  );
};

export default PDFViews;

Is there a way to load the PDF files within the browser page in Volto without having to use an external CDN? I have been attempting to use the same plugin while using a local node_module package installed in the Volto addon itself yet I am not getting anywhere. It says that it was unable to read pdfjs-dist even though I had installed it locally as a dependency within the plugin.

I thank you kindly.

Sincerely,

rbrown12

2

Hi @rbrown12 What do you get in console? I'm suspecting this could might be a CORS issue. Also you might give GitHub - eea/volto-pdf-block: A Volto pdf integration block a try if you haven't recently. Thanks!

3

I gave the suggested addon a try.
This is what I got in the console:

✔ Client
  Compiled successfully in 520.73ms

✔ Server
  Compiled successfully in 3.27s

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
/Users/rhennebrown/Plone525/frontend/Volto13151/node_modules/@bundled-es-modules/pdfjs-dist/build/pdf.js:27612
export default pdf_1;
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/rhennebrown/Plone525/frontend/Volto13151/node_modules/@mikecousins/react-pdf/dist/react-pdf.cjs.development.js:7:29)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
4

Did you ran yarn install after adding addon? Probably that pdf libs are not got installed.

5

Yes, I ran yarn install and I am still getting the same error.

/Users/rhennebrown/Plone525/frontend/Volto13151/node_modules/@bundled-es-modules/pdfjs-dist/build/pdf.js:27612
export default pdf_1;
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/rhennebrown/Plone525/frontend/Volto13151/node_modules/@mikecousins/react-pdf/dist/react-pdf.cjs.development.js:7:29)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
6

Try to load volto-pdf-block as a development addon (clone it in src/addons, add it in jsconfig.json or use mrs-developer for that). It seems that there's a ESM file where a CJS file is expected... I don't know why. Which node version are you using?

7

i am currently using node version 14.15.1