Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceError when using richTextFromMarkdown in Next.js production build #436

Open
tasola opened this issue Jan 19, 2023 · 3 comments
Open

Comments

@tasola
Copy link

tasola commented Jan 19, 2023

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)
  }
  1. Call the function (e.g through a button click)
  2. npm run build (next build)
  3. 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
Copy link

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

@tasola
Copy link
Author

tasola commented Jan 20, 2023

@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
Copy link

mbifulco commented Feb 14, 2023

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants