kentcdodds / mdx-bundler

🦀 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
MIT License
1.74k stars 75 forks source link

Please provide comprehensive error message #117

Open cliid opened 2 years ago

cliid commented 2 years ago

Relevant code or config

import { defineDocumentType, makeSource } from 'contentlayer/source-files';
import remarkTextr from 'remark-textr';
import smartquotes from 'smartquotes';

function dashes(input: string) {
  return input.replaceAll(/\-\-\-/gim, 'β€”').replaceAll(/\-\-/gim, '–');
}

const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'blog/*.mdx',
  bodyType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    publishedAt: { type: 'string', required: true },
    summary: { type: 'string', required: true }
  }
}));

const contentLayerConfig = makeSource({
  contentDirPath: 'data',
  documentTypes: [Blog],
  mdx: {
    remarkPlugins: [
      [remarkTextr, { plugins: [dashes] }]
    ]
  }
});

export default contentLayerConfig;

What you did:

I'm using contentlayer. I simply added the dashes function above, and added it to the plugins list for remark-textr. And then I ran npx contentlayer build. It internally ran mdx-bundler.

What happened:

20:01:36.113 | > _mdx_bundler_entry_point-863b01f2-38cb-4dbc-9017-12853dffc821.mdx:0:0: error: [plugin: esbuild-xdm]
-- | --
20:01:36.113 | 0 β”‚
20:01:36.113 | β•΅ ^
20:01:36.113 | > _mdx_bundler_entry_point-42a900b5-3943-46b9-b819-1c823b1d042d.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.114 | 0 β”‚
20:01:36.114 | β•΅ ^
20:01:36.114 | > _mdx_bundler_entry_point-70ef17d3-9168-43ef-a8ab-be6bd45a9ecb.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.114 | 0 β”‚
20:01:36.115 | β•΅ ^
20:01:36.247 | > _mdx_bundler_entry_point-abdf6eb9-69f1-4888-b2a3-0575a32ce94e.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.247 | 0 β”‚
20:01:36.248 | β•΅ ^
20:01:36.367 | > _mdx_bundler_entry_point-d6f2431e-a919-4d0f-ae5e-6cf1875dedfc.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.367 | 0 β”‚
20:01:36.367 | β•΅ ^
20:01:36.368 | > _mdx_bundler_entry_point-13bbb235-12d3-4a8c-af6b-d30f7b0554af.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.368 | 0 β”‚
20:01:36.368 | β•΅ ^
20:01:36.396 | > _mdx_bundler_entry_point-ea4ea75a-cdf8-4431-a151-790973d015eb.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.396 | 0 β”‚
20:01:36.397 | β•΅ ^
20:01:36.414 | Error: Found problems in 7 of 7 documents.
20:01:36.414 | └── Encountered unexpected errors while processing of 7 documents. This  is possibly a bug in Contentlayer. Please open an issue.
20:01:36.415 | Β 
20:01:36.415 | β€’ "blog/cupcake-ipsum.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
20:01:36.415 | _mdx_bundler_entry_point-863b01f2-38cb-4dbc-9017-12853dffc821.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.415 | β€’ "blog/design.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
20:01:36.415 | _mdx_bundler_entry_point-abdf6eb9-69f1-4888-b2a3-0575a32ce94e.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.415 | β€’ "blog/dijkstra.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
20:01:36.416 | _mdx_bundler_entry_point-42a900b5-3943-46b9-b819-1c823b1d042d.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.416 | β€’ "blog/emojis.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
20:01:36.416 | _mdx_bundler_entry_point-70ef17d3-9168-43ef-a8ab-be6bd45a9ecb.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.416 | β€’ "blog/integrating-twemoji-with-rehype.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
20:01:36.416 | _mdx_bundler_entry_point-d6f2431e-a919-4d0f-ae5e-6cf1875dedfc.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.417 | β€’ "blog/lorem-ipsum.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
20:01:36.417 | _mdx_bundler_entry_point-13bbb235-12d3-4a8c-af6b-d30f7b0554af.mdx:0:0: error: [plugin: esbuild-xdm]
20:01:36.417 | β€’ "blog/priority-queue.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
20:01:36.417 | _mdx_bundler_entry_point-ea4ea75a-cdf8-4431-a151-790973d015eb.mdx:0:0: error: [plugin: esbuild-xdm]

Reproduction repository: https://github.com/cliid/cliid.dev

Problem description:

contentlayer threw the error above. I think the error comes from mdx-bundler. However, the error message was not helpful at all. It just said "unexpected error."

Suggested solution:

I think the error is caused because when the dashes function works, it replaces the frontmatter. Because no frontmatter is provided, it throws the error. To solve the problem, not using the dashes function or only handling non-frontmatter text would be sufficient. However, the core issue here is that mdx-bundler is not providing a helpful error message. If possible, it'd be great if mdx-bundler outputted a better error message.

schickling commented 2 years ago

Thanks for reporting this issue @cliid. I've been facing the same problem multiple times myself. While mdx-bundler wasn't the root of my issues, the "cryptic error messages" (as seen above) made it quite hard to track down the underlying issue.

(Seems like this also appeared in other reported issues.)

a-hariti commented 3 months ago

+1