Question about bundleMDX (files, globals, cwd)

Hi,

thanks for building this project!

• mdx-bundler version: ^5.2.1
• node version: 15.14.0
• npm version: 7.15.0

I am currently working on building this blog: https://github.com/chrislicodes/personal-blog.

The function to bundle the MDX looks like this:

export const prepareMDX = async (directoryName: string) => {
  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 directory = path.join(POSTS_PATH, "/", directoryName);

  const source = getSourceOfFile(directory + "/index.mdx");

  // const files = await getComponents(directoryName);

  const { code, frontmatter } = await bundleMDX(source, {
    // files,
    cwd: directory,
    xdmOptions: (options) => {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        remarkMdxImages,
      ];

      return options;
    },
    esbuildOptions: (options) => {
      options.outdir = path.join(process.cwd(), "/public/img");
      options.loader = {
        ...options.loader,
        ".png": "file",
        ".jpg": "file",
        ".gif": "file",
        ".mp3": "file",
      };
      options.publicPath = "/img/";
      options.write = true;

      return options;
    },
  });

  return { frontmatter, code };
};

In this post, I am importing a component using React Three Fiber:

https://github.com/chrislicodes/personal-blog/blob/main/src/_posts/three-js-post/index.mdx

Using it this way leads to multiple instances of THREE being imported. The multiple imports should be fixed using the “globals” parameter, or would that only apply I import the libraries in the .mdx file directly?

My questions:

1. With passing the “cwd” parameter, the imports in a .mdx file can be resolved - in which scenarios would I have to pass/use the “files” parameter?
2. Can I fix the multiple THREE.js instances with the “globals” parameter, or would that only be needed if I import a library directly in an MDX file?

[tol-is]

@chrislicodes Turns out you need to configure esbuild named-exports.

bundleMDX(content, 
  globals: {
    "@react-three/fiber": {
       varName: "reactThreeFiber",
       namedExports: ["Canvas",  "useFrame"],
       defaultExport: false
     }
  }
);

https://www.npmjs.com/package/@fal-works/esbuild-plugin-global-externals

[chrislicodes]

Everything worked as expected thanks to the previous comment