Single File Type (PDF) to multi-type File Viewer? -

Plone Support Add-on Development
1

rbrown12 and team have been working on our Volto-Documents portal.

We succeeded with PDF rendering (solved by updating our node and some other fixes/mods etc). However we can't survive on just PDF rendering because our clients have added jpgs, bmps, png's to the document repo (p5.2.6).

So we're trying to transition to a react document viewer like so (this module is a up-to-date fork of the original).

We've ran into a roadblock of sorts. Examining the EEA-volto-pdf there's a worker process that gets the data from the backend then makes it available to render in the window/div

the react-doc-viewer doesn't seem to come supplied with such machinery which is what I think the source of our module errors are from (we can post those later).

I see that eea-volto-widgets-view has an image and file widget but I don't think that does what we want to do which is display the associated images (pdf, png, jpgs) that were uploaded with the associated client.

I will ask rbrown12 to chime in later, to help sketch this problem out further in the am.

in health,

Eric

2

Good afternoon, Plone Community!

As Eric mentioned in the previous post, we are currently working on our Volto-Documents portal. The problem we were having was that one of the external dependencies known as "@cyntler/react-doc-viewer" was giving us an error message saying the following:

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
/Users/anonymous/Plone/volto16/node_modules/@cyntler/react-doc-viewer/dist/index.js:16
import React from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159: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.@cyntler/react-doc-viewer (/Users/anonymous/Plone/volto16/external "@cyntler/react-doc-viewer":1:1)
    at __webpack_require__ (/Users/anonymous/Plone/volto16/build/webpack:/webpack/bootstrap:754:1)

I thank you kindly for your help.

Sincerely,

rbrown12

3

I'll try to chime in and provide some insight, though I don't consider myself to be an expert in Javascript module system and bundling.

Let's go from the start. Javascript originated from the browser world. Everything defined (variables, functions) was placed in a global scope (window) by the interpreter, after it was read. It was the browser's job to provide code to the JS interpreter, and it achieved this with the help of the <script> tags.

Obviously, this is kind of low-tech and more sophistication is needed, so the CommonJS standard was created as a method of declaring JS modules and loading them (using require(). A common implementation of the CommonJS standard is require.js, which uses define() to descript how the modules are actually resolved.)

Next in history, the ES6 Javascript standard was created, which included a new type of JS modules, the "ES6 modules". These can be identified by the presence of import X from 'y' statements.

This is where things go haywire, from my perspective. There's a ton of rules on how node decides to interpret a package or module as "ES module or CommonJS", see Modules: ECMAScript modules | Node.js v18.6.0 Documentation and Modules: CommonJS modules | Node.js v18.6.0 Documentation. Add, on top of this, the fact that our code gets through a lot of transformations: Volto uses Webpack to create "javascript bundles", which are mega-files of Javascript code, where a lot of our code gets concatenated in a single file (HTTP2 is relatively new, browsers restrict the number of parallel requests to a single domain, etc) and that code is also not the original, it is "transpiled", from the original "latest ES syntax" to something that older browsers can digest and support.

So, we're now getting to your error. It looks like dist/index.js of react-doc-viewer is targeting a "module-aware" system. In Volto (this is inherited from Razzle, as far as I am aware), we assume that everything under node_modules is already transpiled to CommonJS. Volto uses the Babel transpiler only for Volto code + Volto addons code, nothing more.

So the solution is to instruct Volto's Webpack + Babel bundling/transpilation machinery to also include the react-doc-viewer location when transpiling code. I wrote a blog post on something similar: Custom Volto configuration to fix Babel problems with react-leaflet · The Plone Expanse

1 Like