`source` or `file` must be defined

[Younes]

• mdx-bundler version: 8.0.1
• node version: v16.14.0
• npm version: 8.3.1

Relevant code or config

import matter from 'gray-matter';
import { join } from 'path';
import readingTime from 'reading-time';
import { readdirSync, readFileSync } from 'fs';
import { bundleMDX } from 'mdx-bundler';
import rehypeSlug from 'rehype-slug';
import rehypeCodeTitles from 'rehype-code-titles';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypePrism from 'rehype-prism-plus';

const contentPath = 'content/books';

export async function getFiles() {
  return readdirSync(join(process.cwd(), contentPath));
}

export async function getFileBySlug(slug) {
  // we will pass in a slug of the page we want like /blogs/blog-1
  // example and we will get the parsed content for that particular
  // blog page.

  const source = readFileSync(join(process.cwd(), contentPath, `${slug}.mdx`), 'utf8');

  const { code, frontmatter } = await bundleMDX(source, {
    xdmOptions(options) {
      options.rehypePlugins = [
        ...(options?.rehypePlugins ?? []),
        rehypeSlug,
        rehypeCodeTitles,
        rehypePrism,
        [
          rehypeAutolinkHeadings,
          {
            properties: {
              className: ['anchor'],
            },
          },
        ],
      ];
      return options;
    },
  });

  return {
    // return the parsed content for our page along with it's metadata
    // we will be using gray-matter for this.
    code,
    frontMatter: {
      wordCount: source.split(/\s+/gu).length,
      readingTime: readingTime(source),
      slug: slug || null,
      ...frontmatter,
    },
  };
}

export async function getAllFilesFrontMatter() {
  const files = readdirSync(join(process.cwd(), contentPath));

  return files.reduce((allposts, postSlug) => {
    // returns the parsed data for all the files within the posts directory
    const source = readFileSync(join(process.cwd(), contentPath, postSlug), 'utf8');
    const { data } = matter(source);

    return [
      {
        ...data,
        // we will be using the filename by removing the extension
        // as our slug for the file.
        slug: postSlug.replace('.mdx', ''),
        readingTime: readingTime(source),
      },
      ...allposts,
    ];
  }, []);
}

What you did: this code works fine on mdx-bundler 7.0.0 but when i upgrade to the latest version i get the error below

Reproduction repository:

Problem description:

Suggested solution: I am not sure whats the solution

[Aseem Asthana]

Version 8.0 was a breaking change. You have to change your code to pass the source as part of the object sent to bundleMDX. Simple change - like following

 const { code, frontmatter } = await bundleMDX({
    source: source,
    xdmOptions(options) {
      options.rehypePlugins = [
        ...(options?.rehypePlugins ?? []),

In the above snippet we removed the source option as the first argument and it is now inside the object passed to bundleMDX.

[Younes]

@kamroot That fixed it, thanks!

[Aseem Asthana]

If that is what you want to do, I'd just import the other mdx file from your original mdx file. For example from content/books/index.mdx you can import content/blogs/index.mdx (an example, obviously).