PSPDFKIT :不正确的响应MIME类型

Question

我跟踪了PSPDFKit 这里提供的React教程

我还将我的文件复制到/public目录中，并将除pspdfkit.js之外的所有内容都从node_modules移到那里，并更新了pspdfkit.js变量以指向该目录。

然后，当我尝试使用npm run start在localhost:3000上本地运行我的react应用程序时，我从PSPDFkit获得加载动画，但是它挂起了，控制台给了我一个错误：

使用WASM方法 启动http://localhost:3000/pspdfkit-lib/pspdfkit.wasm下载。 TypeError:未能在“WebAssembly”上执行“编译”：不正确的响应MIME类型。预期“申请/申请”。

我知道这里有个解决问题的话题，但我仍然无法解决我的问题。

有什么想法吗？

我的组件文件：

import React, {Component} from 'react';
import PSPDFKitWeb from 'pspdfkit';

class PSPDFKit extends Component {
    constructor(props, context){
        super(props, context);
        this._instance = null;
        this._container = null;

        this.onRef = this.onRef.bind(this);
        this.load = this.load.bind(this);
        this.unload = this.unload.bind(this);
      }

      onRef(container) {
        this._container = container;
      }

      //function that loads PSPDFKit library when
      async load(props) {
        console.log(`Loading ${props.pdfUrl}`);
        this._instance = await PSPDFKitWeb.load({
          disableWebAssemblyStreaming: true,
          pdf: props.pdfUrl,
          container: this._container,
          licenseKey: props.licenseKey,
          baseUrl: props.baseUrl
        });
        console.log("Successfully mounted PSPDFKit", this._instance);
      }

      unload() {
        PSPDFKitWeb.unload(this._instance || this._container);
        this._instance = null;
      }

      componentDidMount() {
        this.load(this.props);
      }

      componentDidUpdate(nextProps) {
        this.unload();
        this.load(nextProps);
      }

      componentWillUnmount() {
        this.unload();
      }

      render() {
        return <div ref={this.onRef} style={{ width: "100%", height: "100%", position: "absolute" }} />;
      }
    }

export default PSPDFKit

Answer 1

对于任何有同样问题的人来说。禁用web程序集流可能会导致错误。反应--剧本webpack不提供正确的mime类型的wasm文件)。只需在load方法上将disableWebAssemblyStreaming作为true传递：

this._instance = await PSPDFKitWeb.load({
    pdf: props.pdfUrl,
    container: this._container,
    licenseKey: props.licenseKey,
    baseUrl: props.baseUrl,
    disableWebAssemblyStreaming: true, // <---- This here
  });

Answer 2

看起来这个问题是由wasm文件没有按照这里推荐的正确内容类型提供的：https://pspdfkit.com/guides/web/current/pspdfkit-for-web/troubleshooting/#response-has-unsupported-mime-type-error引起的。

打开package.json文件并将react-scripts升级到1.1.5，删除node_modules，然后重新安装。

在未来，请联系pspdfkit.com/ support /request，我们的支持团队将在那里帮助您。