Relative imports break within MDX files

[mrpotatoes]

I believe this has to do with configuring MDX to use proper imports as this is something that it should be able to do.

For instance, given this mdx file

---
title: Testing component thingy
root: '/docs'
parents: ['Get Started']
---

import data from './build-files/data.json'

# This is a test component
<div>
  {console.log('test', data)}
</div>

The stack trace returned is thus:

(Basic, in MDXContent (created by MDXRenderer)) ReferenceError: TestComponent is not defined

Stack trace:
  at MDXContent (eval at _construct (http://localhost:8000/commons.js:6765:21), <anonymous>:56:85)
  in MDXContent (created by MDXRenderer)
  in MDXRenderer (created by PageTemplate)
  in main (created by Basic)
  in Basic (created by Context.Consumer)
  in Adapter (created by Context.Consumer)
  in section (created by BasicLayout)
  in BasicLayout (created by Context.Consumer)
  in Adapter (created by Context.Consumer)
  in div (created by Context.Consumer)
  in div (created by Context.Consumer)
  in StaticQuery (created by RootLayout)
  in RootLayout (created by PageTemplate)
  in PageTemplate (created by HotExportedPageTemplate)
  in AppContainer (created by HotExportedPageTemplate)
  in HotExportedPageTemplate (created by PageRenderer)
  in PageRenderer (created by JSONStore)
  in JSONStore (created by EnsureResources)
  in ScrollContext (created by EnsureResources)
  in RouteUpdates (created by EnsureResources)
  in EnsureResources (created by RouteHandler)
  in RouteHandler (created by Root)
  in div (created by FocusHandlerImpl)
  in FocusHandlerImpl (created by Context.Consumer)
  in FocusHandler (created by RouterImpl)
  in RouterImpl (created by LocationProvider)
  in LocationProvider (created by Context.Consumer)
  in Location (created by Context.Consumer)
  in Router (created by Root)
  in Root
  in a (created by Component)
  in MDXScopeProvider (created by Component)
  in Component (created by Component)
  in Component
  in _default

Perhaps this link will provide some help: https://github.com/ChristopherBiscardi/gatsby-mdx/issues/199

https://github.com/ChristopherBiscardi/gatsby-mdx/issues/176

[wagnerjt]

@mrpotatoes. It is strange that your stack trace is different from your import, i.e. import data from './build-files/data.json' - ReferenceError: TestComponent is not defined

I wanted to verify this myself, because soon I will actually be using the MDX. I did get it working, but please note that when I was creating files and importing them, I ran into issues with the hot-reload. Most of the time, a npm | yarn start did the trick. There was only once that I had to delete my .cache directory that gatsby generated, and that was when I renamed my component.

Here is my example (I just added this in the current contents/docs/MDX.mdx)

import TC from '../../../src/components/TestComponent';

....

<TC />

and my component in the src/components/TestComponent.tsx.

import React from 'react';

export default () => <div>Hello World?!?!</div>

I also wanted to make sure that you could add in some json, so I added a dummy json file, imported it, tucked this line in the contents/docs/MDX.mdx. {console.log(data);}

It also appeared to work.

[mrpotatoes]

Yeah, the import is off cuz I got the testcomponent working with web pack's namespaces working. Not the json tho. I'll give it another shot when im at a computer.

[jannikbuschke]

import TC from '../../../src/components/test-component';
import data from '../../../src/components/data.json';
import data2 from './data.json'

<TC />
# This is a test component
<div>
  {console.log('data', data)}
  {console.log('data2', data2)}
</div>

loading components and data worked for me.

After running webpack: changing already referenced files causes a full page refresh. Adding new relative references and using them causes errors. A webpack restart is necessary.