TypeError: Cannot read properties of undefined (reading 'inTable') in v4.0.0

[arechsteiner]

Affected packages and versions

4.0.0

Link to runnable example

https://github.com/arechsteiner/gfm-bug/blob/main/src/App.tsx#L12

Steps to reproduce

Attempt to render

const test = `hello world \`call' hello world \`call'`

With

<ReactMarkdown remarkPlugins={[remarkGfm]}>
  {test}
</ReactMarkdown>

Expected behavior

Previously this was no issue.

Actual behavior

TypeError: Cannot read properties of undefined (reading 'inTable')

Runtime

No response

Package manager

yarn 1

OS

macOS

Build and bundle tools

Vite

[ChristianMurphy]

Duplicate of remarkjs/react-markdown#763

[github-actions]

Hi! Thanks for taking the time to contribute!

Because we treat issues as our backlog, we close duplicates to focus our work and not have to touch the same chunk of code for the same reason multiple times. This is also why we may mark something as duplicate that isn’t an exact duplicate but is closely related.

Thanks,
— bb

[ChristianMurphy]

The updates are making their way through several hundred packages, for now pin the previous major until the new react-markdown major is released

[arechsteiner]

@ChristianMurphy I'm a bit confused, how is this a duplicate of a typescript related issue? This is not a typescript error, this is a runtime error.

[ChristianMurphy]

A major version release is rolling out across all: unified, remark, rehype, and micromark packages.
This includes both type changes (static analysis error) and changes to the parser (potential runtime error) if the major versions are mismatched.

[AshuInsideOut]

Is this issue fixed yet?

[ChristianMurphy]

@AshuGuptaGamer there is nothing to "fix" it isn't a bug.

The major releases are still rolling out across the remark and mdx projects.
Check if the project you use has a new major update.
If there, is try out the new version.
If not, be patient it takes time to update 500+ packages.

[jaswrks]

Parsing error: Cannot set properties of undefined (setting 'inTable') eslint

Still getting this error after updating to:

"@mdx-js/mdx": "^3.0.0",

        "remark": "^15.0.1",
        "remark-directive": "^3.0.0",
        "remark-frontmatter": "^5.0.0",
        "remark-gfm": "^4.0.0",
        "remark-lint": "^9.1.2",
        "remark-mdx-frontmatter": "^4.0.0",
        "remark-mermaidjs": "^6.0.0",
        "remark-preset-lint-recommended": "^6.1.3",
        "remark-preset-prettier": "^2.0.1",
        "remark-smartypants": "^2.0.0",

---
Foo: Bar
---

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

[wooorm]

You can make a PR to remark-preset-prettier, most likely.

Run npm why remark-gfm and look for who uses the the outdated version.

[JounQin]

remark-preset-prettier doesn't have any dependencies.

[jaswrks]

Thanks for much for reviewing. Here's what I got after running npm why remark-gfm. Seems like we aren’t running anything else that depends on remark-gfm and I confirmed v4.0.0 is what we are running from the top-level of node_modules. So far I haven't seen anything nested deeper that is using another version of it.

$ npm why remark-gfm
[email protected]
node_modules/remark-gfm
  remark-gfm@"4.0.0" from the root project

---
Foo: Bar
---

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Is where we trigger the problem. If I remove remark-gfm from our list of plugins, the problem goes away. Or, if I remove the table markdown the problem also goes away. So it definitely seems like an issue with remark-gfm. I'm not sure why, or where to go from here. I'll be happy to open a PR elsewhere if I find a fix.

[remcohaszing]

This looks like a screenshot from the VSCode remark extension. I’ve been holding back updating this until remark-lint is updated to the latest unified.

[jaswrks]

Thanks all. This seems to resolve the issue by forcibly overriding in package.json, though it's not something I'm ok with for now, so I may need to roll back to prior version of MDX. The underlying cause seems to be eslint. Specifically, the dependencies declared by these two packages are outdated now. See: https://github.com/mdx-js/eslint-mdx/tree/master/packages

    "overrides": {
        "remark-mdx": "3.0.0",
        "remark-parse": "11.0.0",
        "remark-stringify": "11.0.0",
        "unified": "11.0.4"
    }

[rusakovic]

It is still not fixed, right? And the best approach is

syntax-tree/mdast-util-from-markdown#34 (comment)

Hold on version 3 of remark-gfm, until the next major of react markdown is released

Is it correct?

[remcohaszing]

It is fixed by now. See https://github.com/remarkjs/react-markdown/releases/tag/9.0.0. The comment you linked precedes that release.

[rusakovic]

It is fixed by now. See https://github.com/remarkjs/react-markdown/releases/tag/9.0.0. The comment you linked precedes that release.

@remcohaszing Thank you for quick response.

I got this error with "remark-gfm": "4.0.0", and recommendation here contentlayerdev/contentlayer#611 (comment) to check this issue.

Or do we mean different issues?

• "docs/codeblock.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
     _mdx_bundler_entry_point-d295f73f-3987-4c43-b652-df139b3af638.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] TypeError: Cannot read properties of undefined (reading 'inTable')
         at Object.exitCodeText (file:// /node_modules/.pnpm/[email protected]/node_modules/mdast-util-gfm-table/lib/index.js:123:17)
         at compile (file:// /node_modules/.pnpm/[email protected]/node_modules/mdast-util-from-markdown/lib/index.js:352:40)
         at fromMarkdown (file:// /node_modules/.pnpm/[email protected]/node_modules/mdast-util-from-markdown/lib/index.js:187:29)
         at parser (file:// /node_modules/.pnpm/[email protected]/node_modules/remark-parse/lib/index.js:18:12)
         at Function.parse (file:// /node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:273:12)
         at executor (file:// /node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:393:31)
         at new Promise (<anonymous>)
         at Function.process (file:// /node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:380:14)
         at process (file:// /node_modules/.pnpm/@[email protected]/node_modules/@mdx-js/mdx/lib/util/create-format-aware-processors.js:50:22)
         at onload (file:// /node_modules/.pnpm/@[email protected][email protected]/node_modules/@mdx-js/esbuild/lib/index.js:151:22)
         at requestCallbacks.on-load ( /node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1434:28)
         at processTicksAndRejections (node:internal/process/task_queues:95:5)
         at handleRequest ( /node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:729:13)

package.json

     "dependencies": {
    "@radix-ui/react-accordion": "1.1.2",
    "@radix-ui/react-aspect-ratio": "1.0.3",
    "@radix-ui/react-collapsible": "1.0.3",
    "@radix-ui/react-dialog": "1.0.5",
    "@radix-ui/react-dropdown-menu": "2.0.6",
    "@radix-ui/react-icons": "1.3.0",
    "@radix-ui/react-scroll-area": "1.0.5",
    "@radix-ui/react-slot": "1.0.2",
    "@radix-ui/react-tabs": "1.0.4",
    "@radix-ui/react-tooltip": "1.0.7",
    "axios": "1.6.8",
    "class-variance-authority": "0.7.0",
    "clsx": "2.1.0",
    "cmdk": "1.0.0",
    "contentlayer": "0.3.4",
    "jotai": "2.8.0",
    "next": "14.2.2",
    "next-contentlayer": "0.3.4",
    "next-themes": "0.3.0",
    "react": "18.2.0",
    "react-children-utilities": "2.10.0",
    "react-dom": "18.2.0",
    "react-wrap-balancer": "1.1.0",
    "rehype-slug": "6.0.0",
    "sharp": "0.33.3",
    "tailwind-merge": "2.2.2",
    "tailwindcss-animate": "1.0.7",
    "zod": "3.22.4"
  },
  "devDependencies": {
    "@types/node": "20.12.7",
    "@types/react": "18.2.79",
    "@types/react-dom": "18.2.25",
    "autoprefixer": "10.4.19",
    "eslint": "9.0.0",
    "eslint-config-next": "14.2.2",
    "mdast-util-toc": "7.0.0",
    "postcss": "8.4.38",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-pretty-code": "^0.13.1",
    "remark": "15.0.1",
    "remark-code-import": "1.2.0",
    "remark-gfm": "3.0.1",
    "tailwindcss": "3.4.3",
    "typescript": "5.4.5",
    "unist-builder": "4.0.0",
    "unist-util-visit": "5.0.0"
  }
}

[remcohaszing]

I suggest you run npm ls unified. You should see only one version of unified, ideally 11.

You can try to fix it by removing node_modules and your lockfile, and running npm install.

[rusakovic]

I suggest you run npm ls unified. You should see only one version of unified, ideally 11.

You can try to fix it by removing node_modules and your lockfile, and running npm install.

Thank you for your patience and help. I added overrides as was suggested here #57 (comment)

It didn't help. But I add '"mdast-util-frontmatter": "2.0.1"' in addition:

  "pnpm": {
    "overrides": {
      "remark-mdx": "3.0.0",
      "unified": "11.0.4",
      "remark-parse": "11.0.0",
      "mdast-util-frontmatter": "2.0.1"
    }
  }

Now it works.

Just for google, if other devs will have the same compatibility issue

Error: Found 1 problems in 10 documents.

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

     • "docs/supabase/env.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
     _mdx_bundler_entry_point-3f5a0ab5-57a4-43a2-a41d-8ff1cd0b0b3d.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] TypeError: Cannot set properties of undefined (setting 'value')
         at Object.close (file:// /apps/docs/node_modules/.pnpm/[email protected]/node_modules/mdast-util-frontmatter/lib/index.js:69:14)
         at compile (file:// /apps/docs/node_modules/.pnpm/[email protected]/node_modules/mdast-util-from-markdown/lib/index.js:337:40)
         at fromMarkdown (file:// /apps/docs/node_modules/.pnpm/[email protected]/node_modules/mdast-util-from-markdown/lib/index.js:173:27)
         at parser (file:// /apps/docs/node_modules/.pnpm/[email protected]/node_modules/remark-parse/lib/index.js:33:12)
         at Function.parse (file:// /apps/docs/node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:668:12)
         at executor (file:// /apps/docs/node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:734:40)
         at new Promise (<anonymous>)
         at Function.process (file:// /apps/docs/node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:720:47)
         at process (file:// /apps/docs/node_modules/.pnpm/@[email protected]/node_modules/@mdx-js/mdx/lib/util/create-format-aware-processors.js:50:22)
         at onload (file:// /apps/docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@mdx-js/esbuild/lib/index.js:151:22)
         at requestCallbacks.on-load ( /apps/docs/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1434:28)
         at processTicksAndRejections (node:internal/process/task_queues:95:5)
         at handleRequest ( /apps/docs/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:729:13)


SourceFetchDataError: {
  "_tag": "HandledFetchDataError"
}

[remcohaszing]

You should never use overrides unless you’re absolutely sure there’s a problem with a library. That’s not the case here. Using overrides means you’re purposefully overriding dependency versions, risking breakage in unforeseen ways.

[typeofweb]

Should this be reopened?
Downgrading to 3.0.1 fixes the problem for now.

[remcohaszing]

This is not a bug. If you’re seeing this, it means some of your dependencies are outdated, but not all.