syncfusion / ej2-react-ui-components

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.
https://www.syncfusion.com/react-ui-components
Other
350 stars 104 forks source link

React PdfViewerComponent Only Works at Root - Routes Fail to Load PDFium Script #149

Open JonathanAsbury-Dovaxis opened 1 month ago

JonathanAsbury-Dovaxis commented 1 month ago

The ej2-react-pdfviewer inaccurately references pdfium when the PdfViewComponent component is used in nested routes.
For example, if the component is hosted at https://www.myapp.com/a-route/ it throws the following error:

 Failed to execute 'importScripts' on 'WorkerGlobalScope': The script '.../pdfium' failed to load

Documentation suggests copying the folder "ej2-pdfviewer-lib" into the Public folder. But this only works if rendering the component at the project root. The component does work if copying "ej2-pdfviewer-lib" to a matching subfolder. Continuing the example above, providing "....com/a-route/ej2-pdfviewer-lib/" But surely this is not sustainable since routes can be dynamic. Besides, duplicating the code for each route is just a waste of resources.

Either is a bug or I'm missing a concept that's not documented or represented in your demo solutions.

JonathanAsbury-Dovaxis commented 1 month ago

Most likely is it due to use of a relative path to load the 'ej2-pdfviewer-lib' in PdfViewer.prototype.getScriptPathForPlatform part of pdfviewer.js as follows:

This statement load the rendering path rather than the public root as documentation advices (and is preferred).

var _a = document.location, protocol = _a.protocol, host = _a.host, pathname = _a.pathname;

Specifically, _a.pathname throws off the path!

in file: /node_modules/@syncfusion/ej2-pdfviewer/src/pdfviewer/pdfviewer.js

This statement: var baseUrl = protocol + "//" + host + trimmedPathname;

should be:

var baseUrl = protocol + "//" + host

JonathanAsbury-Dovaxis commented 1 month ago

Seems like the problem will exist for other frameworks beyond React, but I haven't tried them.

JonathanAsbury-Dovaxis commented 1 month ago

Looks like you've provided some troubleshooting guidance.
https://ej2.syncfusion.com/react/documentation/pdfviewer/troubleshooting/document-loading-issues Again, this is all rendering at the root. The link doesn't fix the issue of rendering the component in routes. Node: v20.3.1 NPM: 9.6.7

JonathanAsbury-Dovaxis commented 1 month ago

Note: when I change var baseUrl = protocol + "//" + host + trimmedPathname; to var baseUrl = protocol + "//" + host

it works!