(edited)
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-markdownon local computer
npm install react-markdown --legacy-peer-deps- import
ReactMarkdownin 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:
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" }}