Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JonathanAsbury-Dovaxis opened this issue Sep 20, 2024 · 4 comments
Labels
pdf-viewer PDF Viewer component

Comments

@JonathanAsbury-Dovaxis
Copy link

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
Copy link
Author

JonathanAsbury-Dovaxis commented Sep 20, 2024

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
Copy link
Author

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

@JonathanAsbury-Dovaxis
Copy link
Author

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
Copy link
Author

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

it works!

@gsumankumar gsumankumar added the pdf-viewer PDF Viewer component label Oct 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pdf-viewer PDF Viewer component
Projects
None yet
Development

No branches or pull requests

2 participants