ReferenceError when using `richTextFromMarkdown` in Next.js production build

[tasola]

Hi!

I'm experiencing an issue when using richTextFromMarkdown in my Next.js application.

When I run richTextFromMarkdown with a rich text string (no matter how simple string), I get two types of errors: A Next.js hydration error, and a ReferenceError. This only occurs when running an optimized Next.js build (next build + next start) - it works fine with next dev.

I can go around the hydration error by dynamically importing the @contentful/rich-text-from-markdown (even though I of course would prefer not having to).

What I'm having trouble with is the ReferenceError, however. It reads: ReferenceError: locate$1 is not defined. I've tried to read up on the issues in this repo, but I can't find any similar issue. Am I doing anything wrong, or is this a bug?

Steps to reproduce

1. Start a fresh next.js app (see my dependencies below)
2. Create the following function inside pages/index.tsx

const testRichTextFromMarkdown = async () => {
    const richText = await richTextFromMarkdown(`test string`)
    console.log(richText)
  }

3. Call the function (e.g through a button click)
4. npm run build (next build)
5. npm run start (next start)

My dependencies

"@contentful/rich-text-from-markdown": "^15.16.2", "@next/font": "13.1.1", "@types/node": "18.11.18", "@types/react": "18.0.26", "@types/react-dom": "18.0.10", "eslint": "8.31.0", "eslint-config-next": "13.1.1", "next": "13.1.1", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "4.9.4"

[swcolegrove]

This is happening to me as well. Simply importing the package onto a page breaks the page.

[tasola]

@swcolegrove Yeah, really frustrating. I ended up using Marked instead. Not sure if it's a solid replacer for everyone experiencing this issue, but their function lexer was exactly what I was trying to achieve with Contentful's richTextFromMarkdown (this package).

[mbifulco]

I ran into the hydration issue mentioned above when trying to use richTextFromMarkdown in the render function of a page component. The workaround I used was to process the markdown serverside - in either getStaticProps or getServerSideProps, depending on your need:

export const getStaticProps = async (context) => {
  const { slug } = context.params;

  const res = await client.getEntries({
    content_type: 'post',
    "fields.slug": slug,
   });
  
  // get your markdown text field into a variable
  const someRichTextValue = res.items[0].body;

  const rt = await richTextFromMarkdown(
      someRichTextValue
  );
  
  return {
    props: {
      body: rt,
    },
  };
};

then in the render function,

  return (
  <>
     <h1>Some page title</h1>
    {renderContentfulRichText(props.body)}
  </>
  );

Hope that helps!