Can't import components that use external packages

[olayway]

What happens

When I try to import a custom React component that uses a 3rd party packages into my MDX files, I get this error:

 > ../components/LibTest.jsx:1:23: error: Could not resolve "date-fns" (mark it as external to exclude it from the bundle)
    1 │ import { format } from 'date-fns'
      ╵                        ~~~~~~~~~~

Error: Found 1 problems in 1 documents.

 └── Encountered unexpected errors while processing of 1 documents. This is possibly a bug in Contentlayer. Please open an issue.
     
     • "test/components-import.md": UnexpectedMDXError: Error: Build failed with 1 error:
     ../components/LibTest.jsx:1:23: error: Could not resolve "date-fns" (mark it as external to exclude it from the bundle)

The component I'm trying to import:

// LibTest.jsx
import { format } from 'date-fns'

export default function LibTest() {
  return <p>{format(new Date(2014, 1, 11), 'yyyy-MM-dd')}</p>
}

However, when I try to define this component directly in my MDX file and import the package it depends on, everything works just fine.

### Some MDX file
Lorem ipsum ...

import { format } from 'date-fns'

export function LibTest() {
  return <p>{format(new Date(2014, 1, 11), 'yyyy-MM-dd')}</p>
}

<LibTest/>

Steps to reproduce

1. Clone this repo: https://github.com/flowershow/flowershow
2. Go to templates/default and run npm install and npm run dev
3. Open site/content/test/components-import.md
4. Go to "Importing a custom component that uses a 3rd party package" section and uncomment these two lines:

{/*import LibTest from "../components/custom/LibTest.jsx"*/}
{/*<LibTest/>*/}

5. Go to the next section: "Importing and using external package directly in MDX" and comment out/remove these lines:

import { format } from 'date-fns'

export function LibTest() {
  return <p>{format(new Date(2014, 1, 11), 'yyyy-MM-dd')}</p>
}

<LibTest/>

6. 🐛 You should see the above error in the console.

[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!

[olayway]

Thank you sooo much @timlrx 🙏! It does work now! You're the best, thank you! 🌸

[schickling]

Based on the previous comments I assume this issue has been resolved? Otherwise happy to re-open.