react pdf库在gatsby构建时出现错误

Question

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

D:Projectpublicrender-page.js:137661
window.requestAnimationFrame(resolve);
ReferenceError: window is not defined
at D:Projectpublicrender-page.js:40343:3
at new Promise (<anonymous>)
at Object../node_modules/pdfjs-dist/lib/web/ui_utils.js (D:Projectpublicrender-page.js:4034
2:26)
at __webpack_require__ (D:Projectpublicrender-page.js:48664:42)
at Object../node_modules/pdfjs-dist/lib/web/pdf_link_service.js (D:BrisktechAndroidpublicrender-page
.js:39345:17)
at __webpack_require__ (D:Projectpublicrender-page.js:48664:42)
at Module../node_modules/react-pdf/dist/esm/LinkService.js (D:Projectpublicrender-page.js:4
4080:93)
at __webpack_require__ (D:Projectpublicrender-page.js:48664:42)
at Module../node_modules/react-pdf/dist/esm/Document.js (D:Projectpublicrender-page.js:4351
2:71)
at __webpack_require__ (D:Projectpublicrender-page.js:48664:42)
at Module../node_modules/react-pdf/dist/esm/entry.webpack.js (D:BrisktechAndroidpublicrender-page.js
:46550:67)
at __webpack_require__ (D:Projectpublicrender-page.js:48664:42)
at Module../src/routes/default/index.js (D:Projectpublicrender-page.js:7404:90)
at __webpack_require__ (D:Projectpublicrender-page.js:48664:42)
at Object../.cache/_this_is_virtual_fs_path_/$virtual/sync-requires.js (D:BrisktechAndroidpublicrend
er-page.js:6740:116)
at __webpack_require__ (D:Projectpublicrender-page.js:48664:42)
D:Projectpublicrender-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的版本，那么它是有效的，但会发出警告。react 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

如错误提示所示：

有关此错误的更多信息，请参阅我们的文档页面：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(),
},
],
},
})
}
}

基本上，您通过告诉webpack忽略(或添加null加载程序(到/bad-module/依赖项来覆盖它的默认配置。正如您所看到的，测试规则是一个正则表达式(这就是为什么它被包裹在斜杠之间(，因此您需要将/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和/或document，它们在构建时是未定义的全局对象来制作它们的东西，因此您必须传递null加载程序以避免代码中断。这是一个"；普通的"；在处理Gatsby中使用window的第三方依赖关系时进行练习。

由于可能不是第三方依赖关系导致了问题(可能是react-pdf的某种依赖关系(，因此您需要根据输出日志对依赖关系进行一些测试。使用gatsby clean命令清理每次试用中的缓存。