search

wooorm / xdm

Just a *really* good MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins
http://wooorm.com/xdm/
MIT License
595 stars 18 forks source link

Pass components prop to Next page #91

Closed ravinggenius closed 3 years ago

ravinggenius commented 3 years ago

(I created a CodeSandbox, but it isn't showing anything. You're welcome to take a look at the original repo. If so my problem is demonstrated on the mdx-pages branch. Clone the repo, checkout mdx-pages branch, install dependencies with npm install, start server with npm run dev and visit http://localhost:3000/about. Notice the markdown paragraph is not styled.)

I have a Next app that uses emotion for styles. I followed the examples to edit next.config.js, and XDM is processing pages/about/index.mdx correctly. Inside pages/about/index.mdx I am wrapping the page with a layout. This was all very straightforward, so thank you for that!

I'd like to pass the components prop to pages/about/index.mdx, but I'm not clear how. I tried adding <MDXProvider ...> to pages/_app.tsx and then to components/templates/PrimaryMarkdown.tsx. In both cases a plain <p> is rendered. I also tried cloning children in the layout (to pass extra props), but that didn't work either.

wooorm commented 3 years ago

If you use a provider, you must set up your webpack loader or other integration to support that provider: https://github.com/wooorm/xdm#optionsproviderimportsource.

wooorm commented 3 years ago

Note that you don’t need that provider at all. Pass the components to Component here instead: https://gitlab.com/ravinggenius/minecraft-tools/-/commit/73304fed3497e06dcd5df05cfb14c9c0d2d5ccb1#550528cc072fa7d76d123e2f4303d4ab39daa8e8_12_15

ravinggenius commented 3 years ago

Thank you!

I wasn't figuring out where to put providerImportSource, so I followed your second suggestion. It worked!