はじめに

astroでブログサイトを作成している最中に、defineCollection内のloaderプロパティでmdファイルとmdxファイルの指定を行っているのに、mdxファイルだけ取得できない問題が発生し、解決できたため、備忘録を残す。

問題

Content Collection APIのdefineCollectionを用いて、次のようなブログ記事を取得するコードを書いた。

import { defineCollection, reference, z } from "astro:content";
import { glob } from "astro/loaders";

const blogCollection = defineCollection({
  loader: glob({ pattern: "**/*.{md, mdx}", base: "./src/content/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    headingImage: z.string().optional(),
    tags: z.array(z.string()).optional(),
    relatedPosts: z.array(reference("blog")).optional(),
  }),
});

export const collections = {
  blog: blogCollection,
};

loaderではAstro Content Loader APIを使用してsrc/content/blogディレクトリ内にあるmdファイルとmdxファイルを全て取得するようになっている。
この状態でビルドを行い、ブログ記事一覧ページを開くと、mdxファイルの記事だけ表示されなかったことから、読み込まれていないことが判明した。

原因

原因は、loaderプロパティのglob関数のpatternプロパティにて、mdファイルとmdxファイルを取得する**/*.{md, mdx}というところで、カンマの次にスペースが入っていたことから、拡張子にスペースが入っているもの(**/*. mdx)と解釈され、正しくmdxファイルが取得されていなかった。

解決

スペースも文字列と解釈されるため、間を詰めて書く。

  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/blog" }),