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.