Importing node modules to web worker in React/Webpack app - reactjs

Question

I have a React app bundled with Webpack. I would like to use a web worker for one of my components, which exports data to Pdf. The generation of the pdf can take a while and lock the browser, so I want to do this work in a web worker to do it in a separate thread. The problem I am having is importing the JsPDF library into my web worker script so i can use it.
This is my worker script:
import * as JsPDF from "jspdf";
export default () => {
self.addEventListener("message", event => {
const canvases = event.data;
const pdf = new JsPDF({
orientation: "l",
unit: "in",
});
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < canvases.length; i++) {
if (i > 0) pdf.addPage();
pdf.addImage(canvases[i].toDataURL("image/png"), "PNG", 0.25, 0, 11, 8);
}
pdf.save("report.pdf");
self.postMessage("done", "");
});
};
This gives me this error at runtime:
Uncaught ReferenceError: jspdf__WEBPACK_IMPORTED_MODULE_0__ is not defined
at blob:http://localhost:11449/ea75c456-15ee-45e9-b82b-902c518dc635:4
I did also try using the importScript() function, like so:
export default () => {
importScripts("jspdf");
self.addEventListener("message", event => {
const canvases = event.data;
const pdf = new JsPDF({
orientation: "l",
unit: "in",
});
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < canvases.length; i++) {
if (i > 0) pdf.addPage();
pdf.addImage(canvases[i].toDataURL("image/png"), "PNG", 0.25, 0, 11, 8);
}
pdf.save("report.pdf");
self.postMessage("done", "");
});
};
and I get this error:
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The URL 'jspdf' is invalid.
or I try:
importScripts("../../../../node_modules/jspdf/dist/jspdf.min.js");
and I get the same invalid URL error.
I also tried using require outside of the export:
const JsPDF = require("jspdf");
but i still get an error that JsPDF is not defined. What else can I try?
I should mention that the web worker is instantiated using a custom class, as in https://medium.com/prolanceer/optimizing-react-app-performance-using-web-workers-79266afd4a7, for getting the correct URL with webpack:
export default class WebWorker {
constructor(worker: any) {
const code = worker.toString();
const blob = new Blob([`(${code})()`]);
return new Worker(URL.createObjectURL(blob));
}
}

Answer 1

I ended up using worker-loader for webpack. This allows me to import modules in worker scripts like in any other script.