Importing other .mdx files

[arielweinberger]

Hello,

I am trying to import other .mdx files into my pages. This works fine, but the MDX components defined in page.tsx don't get applied.

Is there something I'm missing?

// page
---
title: "Some page"
---
import SomeMDXSnippet from "./snippet.mdx";

<SomeMDXSnippet />

// snippet.mdx

\`\`\`ts
const some = "value";
\`\`\`

The code block won't be styled properly using the CodeBlock component defined in page.tsx:

  ...defaultMdxComponents,
  Tabs: Tabs,
  Tab: Tab,
  Steps: Steps,
  Step: Step,
  TypeTable: TypeTable,
  // HTML `ref` attribute conflicts with `forwardRef`
  pre: ({ ref: _ref, ...props }: any) => (
    <CodeBlock {...props}>
      <Pre>{props.children}</Pre>
    </CodeBlock>
  ),

In general, those MDX components do not apply to any .mdx imported snippet. I need to manually import Tabs and Tab, for example, even though they are already defined in page.tsx.

[fuma-nama]

It's because the MDX components exported from MDX files accept the components prop, your current context (the original MDX file) has the components prop passed in but it's not shared to the imported MDX component.

[arielweinberger]

Works like a charm