How to handle an imported components imports

Hi guys, thank you for the great project! I’m currently trying to get mdx-bundler set up with Next.js and I’m running into some issues when it comes to importing components. The imported component in the MDX file is fine but if that import has it’s own imports it throws an error. Is there a way to tacke this? I’ll show you what I have below

• mdx-bundler version: 4.0.1
• node version: v14.16.0
• npm version: 6.14.11

So I have some code to prepare and get the components like in @Arcath’s post https://www.arcath.net/2021/03/mdx-bundler

import { bundleMDX } from 'mdx-bundler';
import path from 'path';
import { existsSync } from 'fs';
import { readdir, readFile } from 'fs/promises';

export const prepareMDX = async (source, files) => {
  if (process.platform === 'win32') {
    process.env.ESBUILD_BINARY_PATH = path.join(
      process.cwd(),
      'node_modules',
      'esbuild',
      'esbuild.exe'
    );
  } else {
    process.env.ESBUILD_BINARY_PATH = path.join(
      process.cwd(),
      'node_modules',
      'esbuild',
      'bin',
      'esbuild'
    );
  }

  const { code } = await bundleMDX(source, {
    files,
  });

  return code;
};

export const getComponents = async (directory) => {
  const components = {};

  if (!existsSync(directory)) return components;

  const files = await readdir(directory);

  console.log(files);

  for (const file of files) {
    if (file.substr(-3) === 'jsx') {
      const fileBuffer = await readFile(path.join(directory, file));
      components[`./components/${file}`] = fileBuffer.toString().trim();
    }
  }

  return components;
};

which allows me to import the component in postdir > componentsdir but say I am trying to import this form component

import React, { useState } from 'react';
import Button from '../../../src/components/Button';
import styles from '../form.module.css';

const FormWithStyles = ({ title }) => {
  const [content, setContent] = useState({
    subject: `Feedback sent from: ${title}`,
    email: '',
    handle: '',
    message: '',
    honeypot: '',
    accessKey: 'your-access-key',
  });

  const handleChange = (e) =>
    setContent({ ...content, [e.target.name]: e.target.value });

  return (
    <div className={styles.feedback}>
      <p>
        Please let me know if you found anything I wrote confusing, incorrect or
        outdated. Write a few words below and I will make sure to amend this
        blog post with your suggestions.
      </p>
      <form className={styles.form}>
        <label className={styles.message} htmlFor="message">
          Message
          <textarea
            name="message"
            placeholder="What should I know?"
            onChange={handleChange}
            required
          />
        </label>
        <label className={styles.email} htmlFor="email">
          Your Email (optional)
          <input type="email" name="email" onChange={handleChange} />
        </label>
        <label className={styles.handle} htmlFor="handle">
          Twitter Handle (optional)
          <input type="text" name="handle" onChange={handleChange} />
        </label>
        <input type="hidden" name="honeypot" style={{ display: 'none' }} />
        <Button className={styles.submit} type="button" text="Send Feedback" />
      </form>
    </div>
  );
};

export default FormWithStyles;

An error is thrown because the Button component is trying to be imported from my src/components directory and the styles css module is being from that same directory

This is a screenshot of the error:

and the repo can be found here:

https://github.com/Adam-Collier/portfolio-site/tree/render_mdx

(I am currently migrating over from Gatsby so everything is a bit of a mess atm but it should be easy enough to navigate to a blog page that errors)

I appreciate any guidance you have on this and I hope you can help

[city17]

I’m facing the same issue where I’m trying to use a component in an MDX file, which in turn imports other components and a CSS module. So:

// This is the MDX File
import Arrow from './Arrow.jsx'

<Arrow />

// This is the component file
import { motion } from "framer-motion"
import styles from "./Arrow.module.css"

const Arrow = () => {
 return (
  <div className={styles.arrow}>➔</div>
)
}

export default Arrow

Did anyone find a definitive solution to this use case? Or is it best to use CSS in JS instead of CSS modules here? Would prefer to use modules since that’s what I’m using everywhere else on my blog…

[melosomelo]

@FradSer, I opened an issue about it. I managed to make it work through some esbuild configurations, but idk if it’s a very solid solution. Waiting on a response.