PSPDFKIT：不正确的响应 MIME 类型答案

【问题标题】：PSPDFKIT : Incorrect response MIME TypePSPDFKIT：不正确的响应 MIME 类型
【发布时间】：2019-02-04 13:51:34
【问题描述】：

我关注了 PSPDFKit React tutorials available here

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

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

使用 WASM 方法

开始http://localhost:3000/pspdfkit-lib/pspdfkit.wasm下载。

未捕获（承诺中）类型错误：无法在“WebAssembly”上执行“编译”：响应 MIME 类型不正确。预期的“应用程序/wasm”。

I know there is a trouble-shooting topic on it, found here，但我仍然无法解决我的问题。

有什么想法吗？

我的组件文件：

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

【问题讨论】：

标签： reactjs create-react-app webassembly pspdfkit

【解决方案1】：

对于遇到同样问题的任何人。您可能会通过禁用 Web 程序集流（这会导致错误。react-scripts 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
  });

【讨论】：

【解决方案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，我们的支持团队将在那里为您提供帮助。

【讨论】：

很遗憾，这并没有解决我的问题，我给你们的团队发了电子邮件并附上了我的 package.json 文件。