search

shadcn / next-contentlayer

A template with Next.js 13 app dir, Contentlayer, Tailwind CSS and dark mode.
https://next-contentlayer.vercel.app
678 stars 91 forks source link

GitHub Flavoured Markdown with remark-gfm throws an error. #20

Open rabbabansh opened 10 months ago

rabbabansh commented 10 months ago

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 commented 9 months ago

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 commented 6 months ago

Here's what I did to get this working

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

Overwrite the default next Image component in order for the parser to properly access it's props: https://github.com/shadcn/next-contentlayer/blob/5b32397c2034a97a077cd695f3421a2e76af05c5/components/mdx-components.tsx#L4-L6

Needs to be changed into this:

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

Read more here: https://github.com/hashicorp/next-mdx-remote/issues/405#issuecomment-1755491272

For reference, I'm running next@14