Support relative imports of MDX assets

[gergelypap]

It is a really common requirement to have subdirectories for each and every MDX content, where different assets, such as images and components can be coupled.

Example file structure:

data
├── post-01
│   ├── Component.tsx
│   ├── image.jpg
│   └── index.mdx
└── post-02
    ├── Component.tsx
    ├── image.jpg
    └── index.mdx

It is possible to configure contentlayer to load the MDX files in this manner, however it is not currently possible to allow for relative imports of assets, such that:

---
title: My post
---

import Component from './Component';

<Component />

![Image](./image.jpg)

(Image loading is discussed in #11 though.)

UPDATE:

Upon investigating, I found that the cwd given to mdx-bundler is the same as contentDirPath. However, if the MDX file is deeply nested, resolving images and components in the same directory will not work. For example if contentDirPath is /content, but the MDX file is under /content/some-subdir/some-post/index.mdx, any references in the MDX file will be looked in /content.

More precisely: if the MDX file references ![](./image.jpg) or import Component from './Component, those files will try to be resolved from /content, and not /content/some-subdir/some-post where they actually are.

https://github.com/contentlayerdev/contentlayer/blob/main/packages/%40contentlayer/core/src/markdown/mdx.ts#L45 -> should really be: cwd: path.join(cwd, rawDocumentData.flattenedPath).

This simple change solved this issue for me. I will make more tests and perhaps submit a PR on this.

[mshick]

@gergelypap I had originally requested the config function in the related issue so folks could config the cwd like you're describing, but could also use the single fixed cwd as contentlayer does currently.

Considering it more, I'd actually consider the current behavior of contentlayer a bug, since it renders most md / mdx preview tools broken w/r/t image previews of markdown images using relative paths.

I've forked the repo and have the changes in place, minus tests. https://github.com/mshick/contentlayer/blob/main/packages/%40contentlayer/core/src/markdown/mdx.ts#L34-L40

@schickling If you're willing to look at a PR using this approach I can finish it up with tests and submit. This would effectively close out #8 and this issue.

[mshick]

I went ahead and submitted the PR — I figure we can discuss whether it's the right approach there. #270

[mshick]

@gergelypap #270 was merged. Perhaps you can test it out and see if it satisfies your issue?

[schickling]

This should be addressed with the 0.2.7 release. 🎉