How do I render a table with next mdx?

[anandhuremanan]

Summary

import remarkGfm from "remark-gfm";
import createMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

I guess this will works, but it cause the error

[Error: loader my_path\node_modules\@next\mdx\mdx-js-loader.js for match "*.mdx" does not have serializable options. Ensure that options passed are plain JavaScript objects and values.]

Thanks.

Additional information

Next Version : 15.2.2

Example

No response

[icyJoseph]

I followed the docs, https://nextjs.org/docs/app/building-your-application/configuring/mdx, and ended up with this:

https://stackblitz.com/edit/nextjs-fxnygumb?file=app%2Fpage.mdx,mdx-components.ts,app%2Flayout.tsx,app%2Fglobals.css,package.json

Are you maybe forgetting some npm package?

[icyJoseph]

Have you installed all of these?

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

Did you also create the mdx-components file? https://nextjs.org/docs/app/building-your-application/configuring/mdx#add-an-mdx-componentstsx-file

[Ashvith10]

@ananduremanan You can read more about this issue here. That page also mentions a fix for the same. Essentially, this has to do with mdxRs and Turbopack messing around with each other.

/ping @icyJoseph

[anandhuremanan]

Now I'm looking into the root cause for this, also Next.js becomes a complete mess these days. Thanks for the reply though. @Ashvith10 , @icyJoseph

[Ashvith10]

@ananduremanan You have to disable Turbopack, that will fix the issue. You may also want to move the config file from TypeScript (.ts) to Module Javascript file (.mjs). In the same page that I've mentioned, there's the solution.

Honestly, turbopack isn't ready for production yet, and since you're using it only on the development environment, you may safely remove the flag --turbopack in the package.json file.

Unrelated to the issue, but would it be okay for me to DM you?

[anandhuremanan]

Sure buddy, feel free to DM me, mail me at [email protected]