Could not parse import/exports with acorn: SyntaxError: Unterminated template

[EhsanKey]

I have a .mdx file as follows:

---
title: "Another Test Post"
date: "2023-04-28"
tags: ["next.js", "nextjs", "new"]
description: "hello world"
readingTime: "5 min"
category: "test"
---

We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

<Code fileName="pages/index.js" lang="tsx">
   `const Page = () => {
  return <section>Hello World</section>;
};
export default Page;
`
</Code>

I will compile the process using the following code:

import { compileMDX } from "next-mdx-remote/rsc";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import remarkMdxCodeMeta from "remark-mdx-code-meta";
import rehypeSlug from "rehype-slug";

  const { frontmatter, content } = await compileMDX<NoteMeta>({
    source: rawMDX,
    components: {
      Video,
      CustomImage,
      Code,
    },
    options: {
      parseFrontmatter: true,

      mdxOptions: {
        rehypePlugins: [
          rehypeSlug,
          [
            rehypeAutolinkHeadings,
            {
              behavior: "wrap",
            },
          ],
        ],
        remarkPlugins: [remarkMdxCodeMeta],
      },
    },
  });

My Code component is as follows:

import SyntaxHighlighter from "react-syntax-highlighter/dist/esm/default-highlight";
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";

type Props = (props: {
  lang: string;
  fileName: string;
  children: {
    props: {
      children: string;
    };
  };
}) => JSX.Element;

const Code: Props = (props) => {
  const {
    lang,
    fileName,
    children: {
      props: { children },
    },
  } = props;
  return (
    <div className=" my-2">
      <div className="flex items-center justify-between bg-gray-800 text-gray-300 p-2 rounded-t-md">
        <span>{fileName}</span>
        <div className="flex items-center">
          <span className="w-3 h-3 bg-red-500 rounded-full mr-1"></span>
          <span className="w-3 h-3 bg-yellow-500 rounded-full mr-1"></span>
          <span className="w-3 h-3 bg-green-500 rounded-full"></span>
        </div>
      </div>
      <SyntaxHighlighter
        language={lang}
        style={atomOneDark}
        customStyle={{
          padding: "10px",
          backgroundColor: "#1E1E1E",
          fontSize: "0.9rem",
          lineHeight: "1.5",
          overflowX: "auto",
          scrollbarWidth: "thin",
          scrollbarColor: "#4B5563 #1E1E1E",
        }}
      >
        {children}
      </SyntaxHighlighter>
    </div>
  );
};

export default Code;

I receive the following error when compiling MDX:

 ⨯ [Error: [next-mdx-remote] error compiling MDX:
Could not parse import/exports with acorn: SyntaxError: Unterminated template

   7 | };
   8 |
>  9 | export default Page;`
     |                      ^
  10 | </Code>
  11 |

What is the solution?
I would appreciate it if you could help me resolve this issue.

[ChristianMurphy]

Welcome @EhsanKey! 👋
Sorry you ran into a spot of trouble.

Trying your sample code in the MDX playground it doesn't seem to have the unterminated issue described https://mdxjs.com/playground/

I suspect the issue lies in next-mdx-remote.
You are either using a version with MDX 1 which interprets code different.
Or a version with MDX which is untested hashicorp/next-mdx-remote#437
There is no version with MDX 3.

A path forward could be to report the issue to next-mdx-remote. And/or try another mdx and next integration https://mdxjs.com/docs/getting-started/

[remcohaszing]

I see some conflicting information. The error you show points at a line that’s different from the MDX content you provided. I imagine you want something like this:

{/* Notice the brackets that make the child an MDX expression instead of a paragraph with text */}
<Code fileName="pages/index.js" lang="tsx">{
`const Page = () => {
  return <section>Hello World</section>;
};
export default Page;
`
}</Code>

Alternatively maybe you want to use rehype-mdx-code-props, and write:

```tsx fileName="pages/index.js"
const Page = () => {
  return <section>Hello World</section>;
};
export default Page;
```