search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.73k stars 26.62k forks source link

❌ 😱 MDX Not WORKING 💥 #60261

Open aymanechaaba1 opened 8 months ago

aymanechaaba1 commented 8 months ago

Link to the code that reproduces this issue

https://github.com/aymanechaaba1/nextjs-mdx

To Reproduce

  1. npm i
  2. npm run dev
  3. Visit this MDX Page

Current vs. Expected behavior

MDX is not displaying the style of usual MD files after following the exact steps in the doc. MDX NextJS Doc

Verify canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:17:35 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8112
Binaries:
  Node: 20.8.0
  npm: 10.2.5
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

MDX (@next/mdx)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

bionicles commented 8 months ago

clicking the stackblitz example at canary examples with-mdx leads to this error:

~/projects/gqaibxlmy.github
❯ npm install && npx next dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @mdx-js/react@1.6.22
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"^18.2.0" from next@14.0.4
npm ERR!   node_modules/next
npm ERR!     next@"latest" from the root project
npm ERR!   2 more (react-dom, styled-jsx)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm ERR! node_modules/@mdx-js/react
npm ERR!   @mdx-js/react@"^1.6.18" from the root project
npm ERR!   @mdx-js/react@"1.6.22" from @mdx-js/loader@1.6.22
npm ERR!   node_modules/@mdx-js/loader
npm ERR!     @mdx-js/loader@"^1.5.1" from the root project
npm ERR!     1 more (@next/mdx)
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm ERR!   node_modules/@mdx-js/react
npm ERR!     @mdx-js/react@"^1.6.18" from the root project
npm ERR!     @mdx-js/react@"1.6.22" from @mdx-js/loader@1.6.22
npm ERR!     node_modules/@mdx-js/loader
npm ERR!       @mdx-js/loader@"^1.5.1" from the root project
npm ERR!       1 more (@next/mdx)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/.npm/_logs/2024-01-05T16_01_42_053Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/.npm/_logs/2024-01-05T16_01_42_053Z-debug-0.log

stackblitz click result

aymanechaaba1 commented 8 months ago

@bionicles MDX didn't work for me 🙁

bionicles commented 8 months ago

@bionicles MDX didn't work for me 🙁

Sorry to hear you're struggling with it, always remember: strength through struggle!

I took some time to look at my code for a project I wrote a while ago which uses mdx, and here is a link to the key dependency "next-mdx-remote."

It was back before they changed the router but looks like they still maintain it and it's worth a shot.

https://github.com/hashicorp/next-mdx-remote