Vite + PDF.js - JpxError: OpenJPEG failed to initialize

[cmcnicholas]

Hi, been working with pdf.js a little in vite, all seemed to work well with minimal config e.g. following was required to setup the worker:

import * as pdfjsLib from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.mjs',
  import.meta.url,
).toString();

When launching some pdf documents that have older jpegs in I get the following error:

util.js:392 Warning: JpxImage#instantiateWasm: UnknownErrorException: Ensure that the `wasmUrl` API parameter is provided.
util.js:392 Warning: JpxImage#getJsModule: TypeError: Failed to resolve module specifier 'nullopenjpeg_nowasm_fallback.js'
util.js:392 Warning: Unable to decode image "img_p0_1": "JpxError: OpenJPEG failed to initialize".
Warning: Dependent image isn't ready yet

I have hunted for wasmUrl in the docs but can't see where I should configure this option? My understanding its the wasm url of
pdfjs-dist/image_decoders/pdf.image_decoders.mjs

Any help appreciated

[calixteman]

I don't know anything about Vite, but normally at some point you should call getDocument in order to create a loading task:

pdf.js/src/display/api.js

Lines 152 to 156 in 6a4a3b0

	* @property {string} [wasmUrl] - The URL where the wasm files are located.
	* Include the trailing slash.
	* @property {Object} [WasmFactory] - The factory that will be used
	* when reading the wasm files.
	* The default value is {DOMWasmFactory}.

I know our docs aren't crazy, but grep (or ripgrep) is a good tool.

[mkchouhan2016]

GlobalWorkerOptions.workerSrc = https://unpkg.com/pdfjs-dist@${version}/build/pdf.worker.min.mjs;

const wasmUrl = https://unpkg.com/pdfjs-dist@${version}/wasm/;

let doc;
const canvasWidth =
document.getElementById('crystal-container')?.clientWidth || window.innerWidth;
const pages: { dataUrl: string; name: string }[] = [];
if (typeof pdf === 'string') {
doc = await getDocument({ url: pdf, wasmUrl }).promise;
} else {
const buffer = await pdf.arrayBuffer();
doc = await getDocument({ data: new Uint8Array(buffer), wasmUrl }).promise;
}
This is how you add wasmUrl. I am also facing the issue and now its working fine