hashicorp / next-mdx-remote

Load MDX content from anywhere
Mozilla Public License 2.0
2.67k stars 140 forks source link

Migrating to v3 - hydrate to serialize #222

Closed belkocik closed 2 years ago

belkocik commented 2 years ago

Hello, would you please tell me how to convert this old version to newer one? I followed this release note and it hasn't worked: https://github.com/hashicorp/next-mdx-remote/releases/tag/3.0.0 OLD:

// ...
export const getStaticProps = async ({ params }) => {
  const portfolioItem = await getPortfolioItem(params.slug);
  return {
    props: {
      portfolioItem: portfolioItem.portfolios[0],
      content: await renderToString(he.decode(portfolioItem.portfolios[0].content)),
    },
  };
};

output: {hydrate(content)}

Tried like this and it hasn't worked: NEW:

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

export const getStaticProps = async ({ params }) => {
  const portfolioItem = await getPortfolioItem(params.slug);
  return {
    props: {
      portfolioItem: portfolioItem.portfolios[0],
      content: await serialize(portfolioItem.portfolios[0].content),
    },
  };
};`
//output
export default function Home({ portfolioItem, content}) {
  return (
    <>
          <div className="prose prose-xl max-w-none pt-4 text-justify dark:text-gray-100 pb-10 cms-content">
            <MDXRemote {...content} />
          </div>
    </>
  );
}

error: ./node_modules/@esbuild-plugins/node-resolve/esm/index.js:37:0 Module not found: Can't resolve 'builtin-modules' null

BRKalow commented 2 years ago

Can you share a minimal reproduction? Happy to take a look if so.