Build fails when loading react components from a `js` file

• mdx-bundler version: ^3.4.0
• node version: v15.14.0
• npm version: 7.7.6

Relevant code or config

What you did: Use mdx-bundler to use react components to mdx within a Next aplication

What happened:

I get the following error when using components with a .js extension. It seems to work fine if I change the files under /components/shared/* to be .jsx

Server Error

Error: Build failed with 1 error:
__mdx_bundler_fake_dir__/demo.js:3:4: error: Unexpected "<"

I tried using the esbuildOptions and specify a loader for .js files but does not seem to make a difference.

const result = await bundleMDX(post, {
  files: components,
  esbuildOptions: (options) => {
    options.loader = {
      ...options.loader,
      '.js': 'jsx',
    };
    return options;
  },
});

Reproduction repository: next-mdx-simple-blog

Problem description: Build fails when loading react components from a js file

Suggested solution: -

[Arcath]

I’ve opened a PR to fix your initial issue. You where correct, setting a loader in esbuild should have fixed your problem but mdx-bundler was ignoring it. Personally I’d go with cwd as you have the files on disk but once this PR is merged your original code should work.

[Arcath]

@ozyxdev files provides the files as strings that you read in. Extra overheads for you as you need to use fs.readdir to find them and fs.readfile to get the contents.

With cwd esbuild knows where you are running your mdx so it can resolve imports itself and read the files in without you doing anything.

You could drop the fiiles option all together from your options there and it would work as well. It’s working now because esbuild’s own resolution takes precedence, so it resolved ‘./demo’ and never asked our inMemory plugin for an answer.