facebook/docusaurus · error · Error

Error: Input file is missing or uses unsupported image forma

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.

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)

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 ${logger.path(filePath)} Cau

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