如何使用 Gatsby 和 PSPDFKIT 构建项目

Question

我有一个基于 Gatsby 构建的 Web 应用程序，我一直在与 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. To avoid a Error: Windows is not defined, I have modified the webpack config as mentioned here。

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

Answer 1

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

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

In order to make the example work, the PSPDFKit assets need to be copied from their original location in ./node_modules/pspdfkit/dist to ./static. This is done automatically from a postinstall script in located in ./scripts/copy-pspdfkit-files.js.

In case copying the files fails, you can copy them manually:

Copy ./node_modules/pspdfkit/dist/pspdfkit.js to ./static/pspdfkit.js.

Copy ./node_modules/pspdfkit/dist/pspdfkit-lib/ to ./static/pspdfkit-lib/.

这是使用 PSPDFKit 资产所必需的，所以。使用以下内容在项目根目录的 /script 文件夹中创建一个 copy-pspdfkit-files.js 文件：

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 2

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

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

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

Answer 3

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

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

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

如何使用 Gatsby 和 PSPDFKIT 构建项目

How to build a project with Gatsby and PSPDFKIT

node.js

pspdfkit

gatsby