hikerpig / gatsby-project-kb

Developing gatsby-theme-kb, a Gatsby theme for publishing Knowledge Base.
https://gatsby-project-kb.vercel.app/
MIT License
62 stars 15 forks source link

Example for using .mdx #6

Closed CoryADavis closed 3 years ago

CoryADavis commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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.