PSPDFKIT : Incorrect response MIME Type

I followed the PSPDFKit React tutorials available here

I also copied my files to the /public directory and moved everything except pspdfkit.js from node_modules there and I updated my baseUrl variable to point to this directory.

Then when I try to run my react app locally using npm run start on localhost:3000, I get the loading animation from PSPDFkit but it hangs up and the console gives me a single error:

Using WASM method

Start http://localhost:3000/pspdfkit-lib/pspdfkit.wasm download.

Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

I know there is a trouble-shooting topic on it, found here, but I still haven't been able to resolve my issue.

Any thoughts?

My Component File:

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

Solution 1:

For anyone that reaches this with the same problem. You might get by disabling web assembly streaming(which causes the error. react-scripts webpack dont serve wasm files in right mime type). just pass disableWebAssemblyStreaming as true on the load method:

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