react-pdf 库在 gatsby 构建时出错

问题描述

我正在使用 gatsby 创建反应产品。我正在使用 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)

谁能解决这个问题？

解决方法

如错误提示：

有关此错误的更多信息，请参阅我们的文档页面： https://gatsby.dev/debug-html

您的问题依赖于 gatsby develop 出现在浏览器中的事实（其中有 window 和其他全局对象，而 gatsby build 出现在 Node 服务器中，由于显而易见的原因，没有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,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 和/或 document，这是构建时未定义的全局对象来制作它们的东西，因此您被迫传递 {{1} } loader 来避免代码破解。这是处理在 Gatsby 中使用 null 的第三方依赖项时的“常见”做法。

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