Importing components (in MDX) that use external packages doesn't work

[olayway]

@khalilcodes, @rufuspollock it seems importing components that depend on external packages doesn't work indeed 😞 I believe it has to do with Contentlayer's configuration/usage of mdx-bundler. When you actually define the component and import it's dependencies directly in MDX file (not import them from a file) everything works. So it has sth to do with imports resolution I guess. Anyways, I've created an issue in Contentlayer's repo for that: contentlayerdev/contentlayer#302

You can also test it yourself. I've added relevant tests to /content/test/components-import.md so that Contentlayer's team can reproduce the issue.

I think we should also get acquainted with Contentlayer's source code sometime, and also with the docs of mdx-bundler', which they are using under the hood, so that it's not a complete black box for us.

Originally posted by @olayway in #111 (comment)

[rufuspollock]

We have a resolution thanks to a comment from @timlrx

Hi Ola,

That's because the import is not being resolved properly. contentlayer uses the content file directory as the cwd but node_modules is not present in the folder and thus the import node resolution fails. One workaround is to define cwd to the current directory:

export default makeSource({
    mdx: {
      cwd: process.cwd(),
  }
})

and modify the imports relative to the root folder:

import LibTest from "./components/custom/LibTest.jsx"

Hope that helps!