PSPDFKIT: неверный тип ответа MIME

Question

Я следовал инструкциям PSPDFKit React, доступным здесь

Я также скопировал свои файлы в каталог / public и переместил туда все, кроме pspdfkit.js из node_modules, и обновил переменную baseUrl, чтобы она указала на этот каталог.

Затем, когда я пытаюсь запустить приложение реагирования локально, используя npm run start на localhost:3000, я получаю анимацию загрузки из PSPDFkit, но она зависает, и консоль выдает мне единственную ошибку:

Использование метода WASM

Начало http://localhost:3000/pspdfkit-lib/pspdfkit.wasm загрузка.

Uncaught (в обещании) TypeError: Не удалось выполнить 'compile' на 'WebAssembly': Неверный тип MIME ответа. Ожидаемое приложение / wasm.

Я знаю, что здесь есть тема устранения неполадок, найденная здесь , но я до сих пор не смог решить мою проблему.

Есть мысли?

Файл моего компонента:

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

Для тех, кто достигает этого с той же проблемой. Вы можете получить это, отключив потоковую передачу веб-сборки (что приводит к ошибке. Веб-пакет реакции-скрипты не обслуживает файлы wasm с правильным типом MIME). просто передайте 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, и наша служба поддержки поможет вам в этом.