如何用Gatsby和PSPDFKIT构建一个项目

Question

我有一个网络应用程序建立在盖茨比，我一直与PSPDFKIT集成。在执行npm run start时一切都进行得很好，但是在测试构建时，PSPDFKIT并没有正确地加载。在Firefox上，我得到了以下错误。

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

在Chrome上，我随机得到了一个类似的错误。

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)

我一直在使用gatsby serve测试构建。此外，我正在提供所需的文件，如提到的这里。为了避免Error: Windows is not defined，我修改了webpack的配置，如提到的这里。

我应该指出，我已经用PSPDFKIT提供的这个示例做了同样的测试，并且得到了相同的错误(在firefox上更一致)。

Answer 1

因此，在PSPDFKIT支持下，我解决了这个问题。我所要做的就是在执行PSPDFKit.load时添加一个配置选项。到最后，我得到了一些这样的东西：

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

当未设置时，库似乎无法猜测baseUrl。

Answer 2

我不认为您的问题来自Error: Windows is not defined，因为据我所知，基于某些使用它的盖茨比州，PSPDFKIT不需要在webpack的配置中添加null加载程序，所以请删除它。

我认为您缺少的是添加一些手动脚本。根据文件

为了使示例工作，需要将PSPDFKit资产从./node_modules/pspdfkit/dist中的原始位置复制到./静态。这是通过位于./scripts/copy-pspdfkit-files.js中的postinstall脚本自动完成的。 如果复制文件失败，您可以手动复制它们：

• 将./node_modules/pspdfkit/dist/pspdfkit.js复制到./static/pspdfkit.js。
• 将./node_modules/pspdfkit/dist/pspdfkit-lib/复制到./static/pspdfkit-lib/。

为了处理PSPDFKit资产，需要这样做，所以。在项目根目录的copy-pspdfkit-files.js文件夹中创建一个/script文件，内容如下：

const ncp = require("ncp").ncp;
const fs = require("fs");

    ncp(
      "./node_modules/pspdfkit/dist/pspdfkit-lib",
      "./static/pspdfkit-lib",
      err => {
        err && console.error(err);
      }
    );

这个文件将在后置脚本中从PSPDFKIT依赖项中自动调用，但正如文档所述，如果进程失败，则将它们复制到/static文件夹中。

此外，根据您的错误：

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”.

看看我提供的初学者，并比较您的查询。

Answer 3

我们现在已经更新了盖茨比的例子来解决这个问题。请告诉我们，如果它仍然对你不起作用

https://github.com/PSPDFKit/pspdfkit-web-example-gatsbyjs

将来，我建议直接接触我们的支持平台：https://support.pspdfkit.com