Internal error: ReferenceError: entry is not defined

[codedusting]

Describe the bug

I have a readme file at my github repository which I am fetching in the RSC component and then trying to utilise the MDXRemote component to render the content. But it's giving the error ⨯ Internal error: ReferenceError: entry is not defined.

Code:

import { MDXRemote } from "next-mdx-remote/rsc";

export default async function EvaluationPage() {
  const res = await fetch(
    "https://raw.githubusercontent.com/codedusting/contentful/main/README.md",
  );
  const readme = await res.text();

  return (
    <section className="mx-auto grid grid-cols-1 p-6 lg:grid-cols-2 lg:items-center">
      <div className="container prose flex gap-x-4 lg:px-10 xl:px-20">
        <MDXRemote source={readme} />
      </div>
    </section>
  );
}

Reproduction

Internal error: ReferenceError: entry is not defined is what we will get on running the above code in any RSC Page

next-mdx-remote version

^5.0.0

[talatkuyuk]

You receive the error because you have not provided the scope in the options.

The mdx source you fetched consists an expression {entry.fields.previewSlug}, and you should provide that information inside the scope.

<MDXRemote
  source={readme}
  options={{
    scope: {
      entry: { fields: { previewSlug: "any value here"}}
    }
  }}
/>