如何使用 Gatsby 和 PSPDFKIT 构建项目

问题描述

我有一个基于 Gatsby 构建的网络应用程序，我一直在与 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 测试构建。此外，我正在提供所提到的 here 所需的文件。为避免出现 Error: Windows is not defined，我已按照 here 所述修改了 webpack 配置。

我应该提到，我已经对 PSPDFKIT 提供的这个 example 进行了相同类型的测试，并且遇到了相同类型的错误（在 firefox 上更一致）。

解决方法

所以，在 PSPDFKIT 支持的帮助下，我解决了这个问题。我所要做的就是在执行 PSPDFKit.load 时添加一个配置选项。最后我有一些这样的：

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

似乎图书馆在未设置时无法猜测 baseUrl。

我不认为您的问题来自 Error: Windows is not defined，因为据我所知，并且基于某些 Gatsby staters that use it，PSPDFKIT 不需要在其中添加 null 加载程序webpack 的配置，所以删除它。

我认为您缺少的是添加一些手动脚本。 According to the documentation：

为了使示例工作，PSPDFKit 资产需要从 ./node_modules/pspdfkit/dist 中的原始位置复制到。/静止的。这是从安装后脚本自动完成的位于./scripts/copy-pspdfkit-files.js。

如果复制文件失败，您可以手动复制它们：

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

看看我提供的入门并比较您的查询。

我们现在更新了 Gatsby 示例以解决此问题。如果它仍然不适合您，请告诉我们：

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

以后，我建议您直接联系我们的支持平台：https://support.pspdfkit.com

gatsby pspdfkit