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
});