Example for using .mdx

[CoryADavis]

Very cool project! Having trouble getting imported components to render in .mdx on my kb, would it be possible to include an example in the demo?

[hikerpig]

Thank you for posting. I personally don't use mdx quite much (especially when it has custom components), so I didn't pay attention to it.
Would you provide an example of your usage of a typical mdx file, so I can locate the problems and fix them?

[CoryADavis]

Sure thing, this is a stripped down example of how I was trying to use it:

.mdx file

// content/test.mdx

import Test from './components/test.js'

# Test

<Test />

Gatsby is successful at loading this import path, and believes it to exist.

test component to render

// content/components/test.js

import React from "react";

export default function Test() {
    return <h1>Test</h1>;
}

resulting error in the theme's MDXRenderer.tsx

ReferenceError: Test is not defined

   8 |     return null;
   9 |   }
  10 | 
> 11 |   const fn = new Function(`_fn`, "React", "mdx", `${children}`);
  12 | 
  13 |   return fn({}, React, mdx);
  14 | }, [children]);

Error occurs past build phase, when I navigate to the this page specifically.

[hikerpig]

@CoryADavis I think the problem is the path of content/components/test.js, or to be more specific: Where should we put these custom components?. I will look into other Gatsby theme examples and try to come up with a solution and convention in several days.

[hikerpig]

@CoryADavis I do realize that it was a bug that caused the failing of MDX custom component's rendering.
I've fixed the bug in gatsby-theme-kb@0.5.2 and add a very simple example on the demo site. I think your originally problem can be fixed simply by yarn add gatsby-theme-kb@0.5.2.