3

I have a basic blog post I receive from GraphCMS:

export async function getStaticProps({ params }) {
const { event } = await graphcms.request('query here', { slug: params.slug });

return {
  props: {
    event,
  },
  revalidate: 2,
};

The RichText content received from GraphCMS gets displayed, as well as revalidated by using the markdown directly: {event.about.markdown}. The problem is when I introduce MDXRemote. By simply just importing

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

and not using it, I get:

./node_modules/@babel/core/lib/transformation/normalize-file.js:9:0
Module not found: Can't resolve 'fs'
null

The above-mentioned error gets displayed no matter what I do, except if I set mdxSource in getStaticProps:

if (event.about) {
    event.mdxSource = await serialize(event.about.markdown);
}

This removes the module not found error, and correctly converts the markdown to mdx locally, but after pushing it to vercel, any changes done to any portion of the blog post (title, date, content markdown) in GraphCMS won't get displayed.

I've tried serializing in useEffect, but as previously stated, any place but getStaticProps result in Module not found: Can't resolve 'fs'. What would be the correct way to serialize markdown so it gets revalidated from GraphCMS at each refresh?

slothcoder
  • 31
  • 1
  • You can only use `next-mdx-remote/serialize` on the server (inside `getStaticProps`/`getServerSideProps`). That's why you get the `Module not found: Can't resolve 'fs'` error if you do not specify it in `getStaticProps` or try to use it on the client-side (`useEffect`). – juliomalves Jan 14 '22 at 19:28
  • To solve the problem of the data not updating, you can either keep using `getStaticProps` with [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration), or move to [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props). – juliomalves Jan 14 '22 at 19:32
  • Interesting @juliomalves, although I've tried incremental static regen to no avail. I'll give getserversideprops a try, although I was sure I -should- use getstaticprops (https://nextjs.org/docs/basic-features/data-fetching/get-static-props). This link from Next specifically says to use getStaticProps if the data comes from a headless cms. – slothcoder Jan 17 '22 at 05:21
  • Also, their official example: (https://github.com/hashicorp/next-mdx-remote) has the serialization in getStaticProps. It really does feel like I shouldn't have to convert to getServerSideProps, but I'm not sure what causes the issue. – slothcoder Jan 17 '22 at 05:31
  • As I said, if you want the data to regenerate with `getStaticProps` you have to use Incremental Static Regeneration. As its name implies, `getStaticProps` will generate static pages that do not update, unless you rebuild the entire app. – juliomalves Jan 17 '22 at 08:37

0 Answers0