hagnerd / gatsby-starter-blog-mdx

Live Demo
https://gatsby-starter-blog-mdx-demo.netlify.com
MIT License
67 stars 43 forks source link

Import Components into .mdx files? #22

Closed keepforever closed 4 years ago

keepforever commented 4 years ago

It is my understanding, per https://mdxjs.com/advanced/components , that React components can be imported into MDX files.

When I run the starter and add a blog to the content folder it crashes.

content
  - my-new-blog
      - index.mdx
      - MyComponent.js

index.mdx:

---
title: Brian's Brain!
date: '2020-01-01'
---

import MyComponent from './MyComponent.js'

## Above component

<MyComponent />

## Below Component

MyComponent.js:

import React from 'react';

const MyComponent = props => {
    return (
        <div>
            <h3>Hello MyComponent</h3>
        </div>
    );
};

export default MyComponent;

Is importing React components not supported?

keepforever commented 4 years ago

Nevermind, it works if I don't use a default export

MyComponent.jsx:

import React from 'react';

export const MyComponent = props => {
    return (
        <div>
            <h3>Hello MyComponent</h3>
        </div>
    );
};

index.mdx

---
title: Brian's Brain!
date: '2020-01-01'
---

import { MyComponent } from './MyComponent.js'

## Above component

<MyComponent />

## Below Component