Using next-mdx-remote as alternative to react-markdown

naufalhaidar12342 · November 30, 2024, 3:20pm

Hello!
I am asking to verify if it’s possible to replace react-markdown with next-mdx-remote to specifically parse markdown content sent from Contentful GraphQL API.

Previous developers already opened issues in react-markdown repository:
Using react-markdown with Next.js 15 app dir results in error #869
Peer Dependency Issue: React-markdown not compatible with Next.js 15 (React 19 RC) #871

and it seems the conclusion is that react-markdown would not support React 19 until further announcement/update

Questions

I read here that it is possible to render markdown from CMS using the next-mdx-remote. Did I understand it wrong or is it possible? Thank you and I apologize for my broken English🙏
Remote MDX

Current behavior:

[20:31:58.575] Running build in Washington, D.C., USA (East) – iad1
[20:31:58.682] Cloning github.com/naufalHaidar12342/alimanbulus.com (Branch: main, Commit: e274246)
[20:32:00.229] Cloning completed: 1.546s
[20:32:03.354] Restored build cache from previous deployment (nQxpHJBKqMAnmiryQNrcpbYVheBJ)
[20:32:03.443] Running "vercel build"
[20:32:04.382] Vercel CLI 39.1.1
[20:32:05.020] Installing dependencies...
[20:32:06.859] npm error code ERESOLVE
[20:32:06.861] npm error ERESOLVE could not resolve
[20:32:06.861] npm error
[20:32:06.861] npm error While resolving: react-markdown@9.0.1
[20:32:06.861] npm error Found: react@19.0.0-rc-66855b96-20241106
[20:32:06.862] npm error node_modules/react
[20:32:06.862] npm error   react@"19.0.0-rc-66855b96-20241106" from the root project
[20:32:06.862] npm error   peer react@"^18 || ^19 || ^19.0.0-rc" from @headlessui/react@2.2.0
[20:32:06.862] npm error   node_modules/@headlessui/react
[20:32:06.862] npm error     @headlessui/react@"^2.2.0" from the root project
[20:32:06.862] npm error   12 more (@react-aria/focus, @react-aria/interactions, ...)
[20:32:06.862] npm error
[20:32:06.862] npm error Could not resolve dependency:
[20:32:06.862] npm error peer react@">=18" from react-markdown@9.0.1
[20:32:06.862] npm error node_modules/react-markdown
[20:32:06.862] npm error   react-markdown@"^9.0.1" from the root project
[20:32:06.863] npm error
[20:32:06.863] npm error Conflicting peer dependency: react@18.3.1
[20:32:06.863] npm error node_modules/react
[20:32:06.863] npm error   peer react@">=18" from react-markdown@9.0.1
[20:32:06.863] npm error   node_modules/react-markdown
[20:32:06.863] npm error     react-markdown@"^9.0.1" from the root project
[20:32:06.863] npm error
[20:32:06.863] npm error Fix the upstream dependency conflict, or retry
[20:32:06.863] npm error this command with --force or --legacy-peer-deps
[20:32:06.863] npm error to accept an incorrect (and potentially broken) dependency resolution.
[20:32:06.863] npm error
[20:32:06.863] npm error
[20:32:06.863] npm error For a full report see:
[20:32:06.863] npm error /vercel/.npm/_logs/2024-11-30T13_32_05_473Z-eresolve-report.txt
[20:32:06.863] npm error A complete log of this run can be found in: /vercel/.npm/_logs/2024-11-30T13_32_05_473Z-debug-0.log
[20:32:06.881] Error: Command "npm install" exited with 1
[20:32:08.181]

Expected behavior:

react-markdown did not cause any issue after using --legacy-peer-deps or looking for the alternative.

Code, configuration, and steps that reproduce this issue

Configuration

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
	images: {
		remotePatterns: [
			{
				protocol: "https",
				hostname: "images.ctfassets.net",
				port: "",
				pathname: "/contentful-space-id/**",
			},
		],
	},
};

package.json

"dependencies": {
    "@headlessui/react": "^2.2.0",
    "embla-carousel-autoplay": "^8.5.1",
    "embla-carousel-react": "^8.5.1",
    "next": "15.0.3",
    "next-themes": "^0.4.3",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106",
    "react-icons": "^5.3.0",
    "react-markdown": "^9.0.1"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "15.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }
}

Steps to replicate the issue

install react-markdown on local computer

npm install react-markdown --legacy-peer-deps

import ReactMarkdown in the page that parse markdown sent from Contentful API
commit the change and push to github
wait the website rebuild process in vercel

Project information (URL, framework, environment, project settings)

URL: - (sorry it’s a project for client, so I can’t share the repository link)
Framework: Next.js 15.0.3 App Router with Turbopack, Tailwind CSS, headless-ui, embla-carousel, next-themes, react-icons
Environment: Production
Settings: