node.jsgatsbypspdfkit

How to build a project with Gatsby and PSPDFKIT


I have a web app built on Gatsby I have been integrating with PSPDFKIT. All goes well when doing npm run start, but when testing a build, PSPDFKIT is not loading correctly. On Firefox, I am getting the following errors.

Loading failed for the <script> with source “http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:34656:17u@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:34664:8945/%3C/%3C@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:99258:23o@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:14665:19945/%3C/%3C@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:53209:17o@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:14665:19945/%3C/%3C@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:14878:12945/%3C@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:14879:4945/%3C@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:14636:28945@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:14637:2__webpack_require__@http:/localhost:9000/webpack-runtime-6b87f13ad39d10d73a8c.js:85:30539@http:/localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:1207:35__webpack_require__@http:/localhost:9000/webpack-runtime-6b87f13ad39d10d73a8c.js:85:30promise%20callback*componentSrcPagesDocumentTemplateIndexTsx@http:/localhost:9000/app-92e6fce1f37094f47582.js:28583:4617loadComponent@http:/localhost:9000/app-92e6fce1f37094f47582.js:9797:1467loadPage/inFlight%3C@http:/localhost:9000/app-92e6fce1f37094f47582.js:9787:196promise%20callback*loadPage@http:/localhost:9000/app-92e6fce1f37094f47582.js:9785:323loadPage@http:/localhost:9000/app-92e6fce1f37094f47582.js:9803:179@http:/localhost:9000/app-92e6fce1f37094f47582.js:46978:377promise%20callback*@http:/localhost:9000/app-92e6fce1f37094f47582.js:46961:472__webpack_require__@http:/localhost:9000/webpack-runtime-6b87f13ad39d10d73a8c.js:85:30checkDeferredModules@http:/localhost:9000/webpack-runtime-6b87f13ad39d10d73a8c.js:46:23webpackJsonpCallback@http:/localhost:9000/webpack-runtime-6b87f13ad39d10d73a8c.js:33:19@http:/localhost:9000/pspdfkit-lib/chunk-standalone-375f5232b6e41a45.js”.
Uncaught (in promise) ChunkLoadError: Loading chunk 60 failed.
(error: http://localhost:9000/component---src-pages-document-templat…lhost:9000/pspdfkit-lib/chunk-standalone-375f5232b6e41a45.js)
    e pspdfkit.js:369
    t pspdfkit.js:84260
    s pspdfkit.js:36042
    _invoke pspdfkit.js:36022
    e pspdfkit.js:36075
    n pspdfkit.js:5194
    c pspdfkit.js:5211
    exports pspdfkit.js:5218
    exports pspdfkit.js:5207
    oO pspdfkit.js:84494
    load pspdfkit.js:84903
    _callee7$ usePdfViewer.ts:230
    Babel 10
    usePdfViewer usePdfViewer.ts:259
    React 28
    AuthProvider AuthProvider.tsx:38
    promise callback*AuthProvider/< AuthProvider.tsx:38
    React 10
    Webpack 12

On Chrome I am randomly getting a similar error.

Uncaught (in promise) ChunkLoadError: Loading chunk 60 failed.
(error: http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:34656:17%20%20%20%20at%20u%20(http:/localhost:9000/pspdfkit-lib/chunk-standalone-375f5232b6e41a45.js)
    at Function.o.e (http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:14807:17)
    at http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:98698:39
    at s (http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:50480:20)
    at Generator._invoke (http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:50460:23)
    at Generator.t.<computed> [as next] (http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:50513:25)
    at n (http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:19632:21)
    at c (http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:19649:13)
    at http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:19656:11
    at new Promise (<anonymous>)
    at Object.<anonymous> (http://localhost:9000/component---src-pages-document-template-index-tsx-e6eae06a018fd9e345ed.js:19645:16)

I have been testing the build using gatsby serve. Also, I am serving the required files as mentioned here. To avoid a Error: Windows is not defined, I have modified the webpack config as mentioned here.

I should mention that I have done the same kind of tests with this example, provided by PSPDFKIT, and have been getting the same kind of error (more consistently on firefox).


Solution

  • So, with help from PSPDFKIT support, I solved this issue. All I had to do was add a configuration option when doing PSPDFKit.load. By the end I had some like this:

    PSPDFKit.load({
        ...
        baseUrl: location.origin + "/",
        ...
    });
    

    It seems the library fails guessing the baseUrl when not set.