使用 react-pdf 时出现严重依赖警告

Question

我正在尝试在 React 应用程序上显示 pdf，但收到以下警告：

/node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js 关键依赖：require函数的使用方式无法静态提取依赖

Vscode 在导入功能下告诉我这一点。

找不到模块“react-pdf”的声明文件

已经尝试运行npm install ， npm install react-pdf并重新安装包

import React, { Component } from 'react';
import { Document } from 'react-pdf';
import sample from 'file location'
export default class viewer extends Component {
    render() {
        return (
            <div>
                <Document
                    file={sample}
                    onLoadSuccess={this.onDocumentLoadSuccess}
                >
                </Document>
            </div>
        );
    }
}

显示：

浏览器中的“无法加载 PDF 文件”

Answer 1

此代码将显示您的 pdf 文件，但问题将显示在 IDE 控制台中。

import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

就我而言，我使用的是 webpack 4，但尚不支持。 如果您构建项目，它将正常工作。

Answer 2

我的完整解决方法。 在根目录创建一个名为 config-overrides.js 的文件，它应该包含以下内容： module.exports = function override(config) { config.module.rules[0].parser.requireEnsure = true return config };

在 npm 之后，我将 react-app-rewired 连接到您的应用程序并更改 package.json 中的构建函数以读取 react-app-rewired build/react-app-rewired start。 现在应该这样做。