Relative imports break within MDX files about gatsby-antd-docs HOT 3 CLOSED

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.

from gatsby-antd-docs.

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

from gatsby-antd-docs.

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.

from gatsby-antd-docs.