react-pdf 库在 gatsby 构建时出错

Question

我正在使用 gatsby 创建 React 产品。我正在使用 react-pdf 库。它在构建时给出以下错误。我该如何解决？我使用的是 gatsby 3.3.0 版本。并使用 react-pdf 5.2.0

D:\Project\public\render-page.js:137661
  window.requestAnimationFrame(resolve);

ReferenceError: window is not defined
    at D:\Project\public\render-page.js:40343:3
    at new Promise (<anonymous>)
    at Object../node_modules/pdfjs-dist/lib/web/ui_utils.js (D:\Project\public\render-page.js:4034
2:26)
    at __webpack_require__ (D:\Project\public\render-page.js:48664:42)
    at Object../node_modules/pdfjs-dist/lib/web/pdf_link_service.js (D:\Brisktech\Android\public\render-page
.js:39345:17)
    at __webpack_require__ (D:\Project\public\render-page.js:48664:42)
    at Module../node_modules/react-pdf/dist/esm/LinkService.js (D:\Project\public\render-page.js:4
4080:93)
    at __webpack_require__ (D:\Project\public\render-page.js:48664:42)
    at Module../node_modules/react-pdf/dist/esm/Document.js (D:\Project\public\render-page.js:4351
2:71)
    at __webpack_require__ (D:\Project\public\render-page.js:48664:42)
    at Module../node_modules/react-pdf/dist/esm/entry.webpack.js (D:\Brisktech\Android\public\render-page.js
:46550:67)
    at __webpack_require__ (D:\Project\public\render-page.js:48664:42)
    at Module../src/routes/default/index.js (D:\Project\public\render-page.js:7404:90)
    at __webpack_require__ (D:\Project\public\render-page.js:48664:42)
    at Object../.cache/_this_is_virtual_fs_path_/$virtual/sync-requires.js (D:\Brisktech\Android\public\rend
er-page.js:6740:116)
    at __webpack_require__ (D:\Project\public\render-page.js:48664:42)
D:\Project\public\render-page.js:40343
  window.requestAnimationFrame(resolve);
  ^
failed Building static HTML for pages - 2.931s

 ERROR #95313

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  10 |
  11 | export default function _createClass(Constructor, protoProps, staticProps) {
> 12 |   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     | ^
  13 |   if (staticProps) _defineProperties(Constructor, staticProps);
  14 |   return Constructor;
  15 | }


  WebpackError: Call retries were exceeded

  - createClass.js:12
    [fitupme-app]/[@babel]/runtime/helpers/esm/createClass.js:12:1



error Command failed with exit code 1.

如果我降低 react-pdf 的版本那么它可以工作但会发出警告。反应-PDF：4.2.0

 ERROR

(node:6076) [DEP_WEBPACK_COMPILATION_CACHE] DeprecationWarning: Compilation.cache was removed in favor of
Compilation.getCache()
(Use `node --trace-deprecation ...` to show where the warning was created)


 ERROR

(node:6076) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now
[fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)


 ERROR

(node:6076) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_INDEXER] DeprecationWarning: chunk.files was changed from Array to Set (in
dexing Array is deprecated)

谁能解决这个问题？

Answer 1

如错误提示中：

See our docs page for more info on this error: https://gatsby.dev/debug-html

您的问题取决于 gatsby develop 发生在浏览器中（其中有 window 和其他全局对象，而 gatsby build 发生在节点服务器中，原因很明显没有window（总结了很多）

处理自己的代码时，您可以绕过此问题，将您的逻辑包装在以下条件中：

import * as React from "react"

// Check if window is defined (so if in the browser or in node.js).
const isBrowser = typeof window !== "undefined"

export default function MyComponent() {
  let loggedIn = false
  if (isBrowser) {
    window.localstorage.getItem("isLoggedIn") === "true"
  }

  return <div>Am I logged in? {loggedIn}</div>
}

来源：https://www.gatsbyjs.com/docs/debugging-html-builds/

上面的代码片段将避免中断构建，因为它不会执行代码中有问题的部分，这要归功于 typeof window !== "undefined" 条件。

但是，在您的情况下，您不是在处理自己的代码，因此您需要告诉 webpack 避免转译有问题的模块。在您的 gatsby-node.js 中添加以下代码段：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

基本上，您通过告诉它忽略（或添加 null 加载程序）到 /bad-module/ 依赖项来覆盖 webpack 的默认配置。如您所见，测试规则是一个正则表达式（这就是为什么用斜杠括起来的原因）因此您需要将 /bad-module/ 更改为 node_modules 中的依赖项名称。这样的事情应该有效：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-pdf/, // check /pdfjs-dist/ too
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

react-pdf 正在尝试使用 window and/or document，什么是构建时未定义的全局对象来制作它们的东西，因此您被迫通过null 加载程序以避免代码破坏。这是处理在 Gatsby 中使用 window 的第三方依赖项时的“常见”做法。

因为它可能不完全是导致问题的第三方依赖项（它可能是 react-pdf 的某些依赖项），您将需要根据输出日志进行一些试验测试依赖项。使用 gatsby clean 命令在每次试验中清理缓存。

react-pdf 库在 gatsby 构建时出错

react-pdf library is giving error at gatsby build time

reactjs

webpack

gatsby

react-pdf