Error building MDX file with unexpected TypeError in mdast-util-gfm-table

[alexkuchar]

I encountered an issue while building my MDX file, and it seems to be related to a TypeError in the mdast-util-gfm-table library. The error message is as follows:

Error: Found 1 problems in 1 documents.

 └── Encountered unexpected errors while processing of 1 documents. This is possibly a bug in Contentlayer. Please open an issue.

     • "style-guide.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
     _mdx_bundler_entry_point-be95c445-2787-4fd1-8b75-7261d55f44cc.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] TypeError: Cannot read properties of undefined (reading 'inTable')
         at Object.exitCodeText (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/mdast-util-gfm-table/lib/index.js:123:17)
         at compile (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/mdast-util-from-markdown/lib/index.js:352:40)
         at fromMarkdown (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/mdast-util-from-markdown/lib/index.js:187:29)
         at parser (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/@mdx-js/mdx/node_modules/remark-parse/lib/index.js:18:12)
         at Function.parse (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/@mdx-js/mdx/node_modules/unified/lib/index.js:273:12)
         at executor (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/@mdx-js/mdx/node_modules/unified/lib/index.js:393:31)
         at new Promise (<anonymous>)
         at Function.process (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/@mdx-js/mdx/node_modules/unified/lib/index.js:380:14)
         at process (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/@mdx-js/mdx/lib/util/create-format-aware-processors.js:50:22)
         at onload (file:///C:/Users/Alex/Desktop/alexkuchar.com/node_modules/@mdx-js/esbuild/lib/index.js:151:22)
         at requestCallbacks.on-load (C:\Users\Alex\Desktop\alexkuchar.com\node_modules\esbuild\lib\main.js:1434:28)
         at processTicksAndRejections (node:internal/process/task_queues:95:5)
         at handleRequest (C:\Users\Alex\Desktop\alexkuchar.com\node_modules\esbuild\lib\main.js:729:13)


SourceFetchDataError: {
  "_tag": "HandledFetchDataError"
}

I believe this may be a bug in Contentlayer or one of its dependencies. Here are the details:

• MDX File: "style-guide.mdx"
• Error Type: UnexpectedMDXError
• Error Message: TypeError: Cannot read properties of undefined (reading 'inTable')
• Library: mdast-util-gfm-table
• Build Tool: @mdx-js/esbuild

This problem occurs specifically when attempting to create an inline code block by enclosing it within single backticks.

[cjroebuck]

see remarkjs/remark-gfm#57

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gautamankoji]

EDIT

solution: fixing TypeError: Cannot set properties of undefined (setting 'inTable') in next.js

issue overview

the error occurs when using remark-gfm with next.js, either in the pages router or the app router, the root cause is a version mismatch between remark-gfm and other markdown-related dependencies, such as code highlighters and markdown converters

solution

to resolve this issue, downgrade remark-gfm to a compatible version, instead of using:

"remark-gfm": "^your_version"

downgrade to version 3.0.1:

npm install remark-gfm@3.0.1

or for yarn:

yarn add remark-gfm@3.0.1

after installing the compatible version, restart your development server:

rm -rf .next node_modules package-lock.json yarn.lock
npm install
npm run dev

@remarkjs could you investigate this issue

root cause

the error occurs because mdast-util-gfm-table, a dependency of remark-gfm, is expecting a structure that is not properly defined due to version conflicts, downgrading to version 3.0.1 ensures compatibility with contentlayer and other related markdown utilities

if you encounter similar issues when using mdx or other markdown-based tools in next.js, always verify the compatibility of your markdown processor versions (remark-* packages, rehype-*, contentlayer, etc)