GitHub Flavoured Markdown with remark-gfm throws an error.

[rabbabansh]

Related: #17 #16 #17

I can't get remark-gfm to work as a plugin for extending markdown support to include Github Flavoured Markdown.

Adding an

mdx: {
   remarkPlugins: [remarkGfm],
}

throws a huge error like this:

UnknownEsbuildError: Error: Build failed with 1 error:
contentlayer.config.js:56:0: ERROR: Unexpected "}"
Contentlayer config change detected. Updating type definitions and data...
- wait compiling...
Generated 5 documents in .contentlayer
- event compiled successfully in 135 ms (439 modules)
- wait compiling...
- event compiled successfully in 74 ms (439 modules)
Contentlayer config change detected. Updating type definitions and data...
Generated 5 documents in .contentlayer
- wait compiling...
- event compiled successfully in 99 ms (439 modules)
ConfigReadError (/Users/ansh/repos/contentlayer-remarkgfm-test/contentlayer.config.js): ReferenceError: plugin is not defined
ConfigReadError (/Users/ansh/repos/contentlayer-remarkgfm-test/contentlayer.config.js): ReferenceError: plugin is not defined
ConfigReadError (/Users/ansh/repos/contentlayer-remarkgfm-test/contentlayer.config.js): ReferenceError: remar is not defined
ConfigReadError (/Users/ansh/repos/contentlayer-remarkgfm-test/contentlayer.config.js): ReferenceError: remar is not defined
Contentlayer config change detected. Updating type definitions and data...
✘ [ERROR] TypeError: Cannot read properties of undefined (reading 'inTable')
    at Object.exitCodeText (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/mdast-util-gfm-table/lib/index.js:123:17)
    at compile (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/mdast-util-from-markdown/lib/index.js:352:40)
    at fromMarkdown (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/mdast-util-from-markdown/lib/index.js:187:29)
    at parser (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/remark-parse/lib/index.js:18:12)
    at Function.parse (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/unified/lib/index.js:273:12)
    at executor (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/unified/lib/index.js:393:31)
    at new Promise (<anonymous>)
    at Function.process (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/unified/lib/index.js:380:14)
    at process (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/@mdx-js/mdx/lib/util/create-format-aware-processors.js:50:22)
    at onload (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/@mdx-js/esbuild/lib/index.js:151:22)
    at requestCallbacks.on-load (/Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/esbuild/lib/main.js:1434:28)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at handleRequest (/Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/esbuild/lib/main.js:729:13) [plugin @mdx-js/esbuild]

    _mdx_bundler_entry_point-109baca5-1415-4c61-9175-beae062d6d9a.mdx:0:0:
      0 │ ---
        ╵ ^

✘ [ERROR] TypeError: Cannot read properties of undefined (reading 'inTable')
    at Object.exitCodeText (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/mdast-util-gfm-table/lib/index.js:123:17)
    at compile (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/mdast-util-from-markdown/lib/index.js:352:40)
    at fromMarkdown (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/mdast-util-from-markdown/lib/index.js:187:29)
    at parser (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/remark-parse/lib/index.js:18:12)
    at Function.parse (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/unified/lib/index.js:273:12)
    at executor (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/unified/lib/index.js:393:31)
    at new Promise (<anonymous>)
    at Function.process (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/unified/lib/index.js:380:14)
    at process (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/@mdx-js/mdx/lib/util/create-format-aware-processors.js:50:22)
    at onload (file:///Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/@mdx-js/esbuild/lib/index.js:151:22)
    at requestCallbacks.on-load (/Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/esbuild/lib/main.js:1434:28)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at handleRequest (/Users/ansh/repos/contentlayer-remarkgfm-test/node_modules/esbuild/lib/main.js:729:13) [plugin @mdx-js/esbuild]```
    
   Anyone have any ideas on how can I implement gfm in contentlayer based next project?

[abhigyantrips]

The TypeError is still an issue for me. Any updates?

Edit: Turns out everyone thinks this is the repo for the next-contentlayer library, gonna redirect to https://github.com/contentlayerdev/contentlayer 😅

[rdig]

Here's what I did to get this working

You'll first have to downgrade remark-gfm to 3.x.x (Read more here: hashicorp/next-mdx-remote#403)

Overwrite the default next Image component in order for the parser to properly access it's props:

next-contentlayer/components/mdx-components.tsx

Lines 4 to 6 in 5b32397

	const components = {
	Image,
	}

Needs to be changed into this:

const components = {
  Image: (props: any) => <Image alt={props.alt} {...props} />,
};

Read more here: hashicorp/next-mdx-remote#405 (comment)

For reference, I'm running next@14