can't use React Markdown with Next JS

[mshaheeruddin]

I was working on a Next JS application.

As I installed react-markdown by using npm install react-markdown, and started dev server, it crashed with the error:

**Server Error
TypeError: Cannot read properties of null (reading 'useContext')

This error happened while generating the page. Any console logs will be displayed in the terminal window.**

I tried cleaning my cache [as it also happened with another package but after cleaning cache and running npm install it resolved] but it didn't solve the issue.

As I uninstall react-markdown, my app runs fine without any issues.

P.S: Just to be clear, I haven't used Context API anywhere (no state management tool at all)

[ChristianMurphy]

Welcome @mshaheeruddin! 👋
Sorry you ran into a spot of trouble.
As @wooorm notes in remarkjs/react-markdown#767 (comment), react-markdown doesn't leverage the useContext API.
It is highly unlikely, nearly impossible for react-markdown to be the root cause.

Some things to consider:

• Are there any other components on the page which may be leveraging context?
• Are you including multiple different versions of react on the page? (though dependencies, check your package lock file)
• Are you sure your build tool is configured correctly?

Try searching the problem with your search engine of choice, and the keywords "TypeError: Cannot read properties of null (reading 'useContext') next"

[mshaheeruddin]

Can this be an issue from Next JS side?

I am really sure that I haven't used Context API anywhere
Problem is getting resolved as soon as I uninstall react-markdown package (have checked this twice)

I don't know how to check for this:

Are you including multiple different versions of react on the page? (though dependencies, check your package lock file)
Are you sure your build tool is configured correctly?

[ChristianMurphy]

copied from remarkjs/react-markdown#767 (comment)

Can this be an issue from Next JS side?

Yes, it can, for example: https://stackoverflow.com/questions/75595118/using-next-js-router-error-cannot-read-properties-of-null-reading-usecontext

I am really sure that I haven't used Context API anywhere

You have, most likely indirectly, through a stateful component or router.

I don't know how to check for this: Are you including multiple different versions of react on the page? (though dependencies, check your package lock file)

Open your npm package-lock.json file, yarn yarn.lock file, or pnpm pnpm-lock.yaml in an editor, search for "react" and look at the version numbers. (https://blog.shalvah.me/posts/understanding-lockfiles)
If there are multiple versions of react included in your project that is a problem, and you need to adjust your dependencies so you have just one.

I don't know how to check for this: Are you sure your build tool is configured correctly?

Check what components you have on the page and the react versions first.
Only after you have confirmed those are not the source, ask https://github.com/vercel/next.js/discussions for configuration tips.
Please do not spam this question in many different places at the same time, it wastes the time of the people helping you.