facebook/docusaurus · error · Error

Error: Input file is missing or uses unsupported image…

Error message

Error: Input file is missing or uses unsupported image format, lqip v${version}

What it means

Thrown by the lqip-loader base64() helper when the image file's extension is not in SUPPORTED_MIMES (only `jpeg`, `jpg`, `png` are supported). The ERROR_EXT constant string is reused from sharp's own error wording and embeds the installed lqip-loader version. Note the throw at line 36 is purely an extension/MIME check; if the extension IS supported but sharp itself fails to decode the file, the catch at line 42 logs and rethrows sharp's error instead.

Solutions

1. Convert or replace the image with jpg/png, the only formats lqip-loader currently supports for base64 LQIP.
2. Rename a case-mismatched extension to lowercase (`.JPG` -> `.jpg`) since SUPPORTED_MIMES keys are lowercase.
3. Disable LQIP generation for the problematic image or move it out of the lqip-processed asset path.
4. Extend SUPPORTED_MIMES in a fork only if you also confirm sharp can resize that format to 10px reliably.

Example fix

// before: logo.webp is unsupported
![logo](./logo.webp)
// after: convert to png
![logo](./logo.png)

import path from 'path';

const SUPPORTED_LQIP_EXT = new Set(['jpg', 'jpeg', 'png']);

function isLqipSupportedImage(filePath: string): boolean {
  const ext = path.extname(filePath).split('.').pop()?.toLowerCase() ?? '';
  return SUPPORTED_LQIP_EXT.has(ext);
}

// before referencing an image for lqip:
// if (!isLqipSupportedImage(assetPath)) convert it to png/jpg first.

const isLqipSupportedExt = (ext: string): boolean =>
  ['jpg', 'jpeg', 'png'].includes(ext.toLowerCase());

When it happens

Trigger: An MDX/doc page references a `.webp`, `.gif`, `.svg`, `.avif`, or other image whose extension is not in SUPPORTED_MIMES, and lqip-loader tries to generate its low-quality placeholder. Also triggered by an uppercase extension (`.JPG`) since the lookup is case-sensitive (path.extname returns the case as-is).

Common situations: Adding modern image formats (webp/avif) to docs while lqip is enabled; macOS/Windows saving files with capitalized extensions; a referenced asset that is actually an SVG masquerading with a raster extension.

Related errors

• MDX compilation failed for file

AI-assisted analysis of facebook/docusaurus@3f483e80e3 (2026-08-12). Data as JSON: /api/errors/f7857ef99b32a6cb. Report an issue: GitHub.

Appendix: source

Thrown at packages/lqip-loader/src/lqip.ts:36

  jpeg: 'image/jpeg',
  jpg: 'image/jpeg',
  png: 'image/png',
};

/**
 * It returns a Base64 image string with required formatting to work on the web
 * (<img src=".." /> or in CSS url('..'))
 */
const toBase64 = (extMimeType: string, data: Buffer): string =>
  `data:${extMimeType};base64,${data.toString('base64')}`;

export async function base64(file: string): Promise<string> {
  let extension = path.extname(file);
  extension = extension.split('.').pop()!;
  const mime = SUPPORTED_MIMES[extension];

  if (!mime) {
    throw new Error(ERROR_EXT);
  }

  try {
    const data = await sharp(file).resize(10).toBuffer();
    return toBase64(mime, data);
  } catch (err) {
    logger.error`Generation of base64 failed for image path=${file}.`;
    throw err;
  }
}

View on GitHub (pinned to 3f483e80e3)