mui/material-ui · error · Error

MUI: the card image for the blog post "${slug}" is missing.\

Error message

MUI: the card image for the blog post "${slug}" is missing.\nAdd a docs/public/static/blog/${slug}/card.png file and then restart Next.js or else remove card: true from the headers.

What it means

prepareMarkdown checks that any blog post declaring `card: true` in its frontmatter has a matching card.png at docs/public/static/blog/<slug>/card.png. The card image is used for blog listing previews; missing it would render a broken preview, so the build fails fast. The message tells you to either add the image or remove the `card: true` header.

Source

Thrown at packages-internal/markdown/prepareMarkdown.mjs:270

      );
      docs[userLanguage] = {
        description,
        location,
        rendered,
        toc,
        title,
        headers,
      };
    });

  if (docs.en.headers.card === 'true') {
    const slug = docs.en.location.replace(/(.*)\/(.*)\.md/, '$2');
    const exists = fs.existsSync(
      path.resolve(config.options.workspaceRoot, `docs/public/static/blog/${slug}/card.png`),
    );

    if (!exists) {
      throw new Error(
        [
          `MUI: the card image for the blog post "${slug}" is missing.`,
          `Add a docs/public/static/blog/${slug}/card.png file and then restart Next.js or else remove card: true from the headers.`,
        ].join('\n'),
      );
    }
  }

  return { docs };
}

export default prepareMarkdown;

View on GitHub (pinned to bdc96df2cb)

Solutions

1. Add docs/public/static/blog/<slug>/card.png with the card artwork (use the exact slug derived from the markdown filename).
2. Or remove `card: true` from the post's frontmatter headers to disable the card preview.
3. Restart the Next.js docs server (`pnpm docs:dev`) after adding the file so the static asset is picked up.

Example fix

---
title: My Post
card: true
---
// option A: add the file docs/public/static/blog/my-post/card.png
// option B (after)
---
title: My Post
---

import fs from 'fs';
import path from 'path';
function cardAssetExists(workspaceRoot, slug) {
  return fs.existsSync(path.resolve(workspaceRoot, `docs/public/static/blog/${slug}/card.png`));
}
if (headers.card === 'true' && !cardAssetExists(workspaceRoot, slug)) {
  throw new Error('card.png missing — add it or remove card: true');
}

When it happens

Trigger: Adding `card: true` to a blog post's frontmatter without committing the corresponding card.png; renaming a blog post slug after adding the card so the path no longer matches.

Common situations: New blog post draft that enables the card before the design team produced the image; slug renamed late in the process.

Related errors

• docs-infra: The title "${title}" is too long (${title.length
• docs-infra: Missing description in the page: ${location}\n
• docs-infra: The description "${description}" is too long (${
• docs-infra: The description "${description}" should end with
• docs-infra: Unsupported language: "sh" in:\n\n```sh\n${code}

AI-assisted analysis of mui/material-ui@bdc96df2cb (2026-08-12). Data as JSON: /api/errors/8dcd778d268d30aa. Report an issue: GitHub.