额外的加载器pdfjs-dist在反应应用程序？

Question

我的react应用程序中有pdfjs-dist依赖项，但它无法工作--我不确定是什么原因导致了这种情况。我运行的是node v14.16.1、npm v7.9.0、react 17.0.2、react-scripts 4.0.3和pdfjs-dist 2.7.570。运行npm start时，我收到以下错误消息

Failed to compile.

./node_modules/pdfjs-dist/build/pdf.js 2407:53
Module parse failed: Unexpected token (2407:53)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                 intent: renderingIntent,
|                 renderInteractiveForms: renderInteractiveForms === true,
>                 annotationStorage: annotationStorage?.getAll() || null
|               });
|             }

我已经尝试过卸载并重新安装相关的包，以及npm update、npm audit等等。我还尝试添加pdfjs npm包，但它已经是worker-loader -dist上的对等依赖，所以没有什么区别。我的合作伙伴在这个项目上有相同的repo，他没有问题，所以我相信这是我的事情。我认为这与对可选链接的支持有关，但不确定如何继续。谢谢!

Answer 1

我只是偶然发现了同样的问题。我所做的是将pdfjs-dist恢复到更早的版本(在我的例子中是2.9.359回到2.6.347 )。现在一切都很好，希望能帮助到一些人。

一个类似案例的可能解释可以在另一个question中找到。

Answer 2

很有可能你对webpack的理解是错误的。尝试使用es5 build https://github.com/mozilla/pdf.js/issues/12905

Answer 3

尝试将包包含在babel-loader规则中

  {
    test: /\.[tj]sx?$/i,
    include: [
      /\/node_modules\/pdfjs-dist/,`enter code here`
      /\/src/,
    ],
    loader: 'babel-loader',`enter code here`
    options: {},
  },