Cannot use next/image with mdx-bundler

Question

I have a blog that uses nextjs and mdx bundler, when I try to import the NextJS Image component inside an MDX file, I get this error:

Error: Build failed with 2 errors:
../node_modules/next/dist/compiled/micromatch/index.js:22:3444: ERROR: Could not resolve "path"
../node_modules/next/dist/compiled/micromatch/index.js:22:3479: ERROR: Could not resolve "util"

This is the relevant code that I used to get mdx-bundler to work

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.mdx`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
  // Combine the data with the id
  const {code, frontmatter} = await bundleMDX({
    source: fileContents,
  })
  return {
    id,
    code,
    frontmatter,
  };
}