TypeError: Cannot read properties of undefined (reading 'inTable') in v4.0.0
arechsteiner opened this issue · comments
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
Duplicate of remarkjs/react-markdown#763
Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.
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
The updates are making their way through several hundred packages, for now pin the previous major until the new react-markdown major is released
@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.
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.
Is this issue fixed yet?
@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.
Hey @ChristianMurphy, thank you and everyone for the fantastic work here!
What's a reasonable expectation to have for this to be resolved?
I noticed that it's approaching 2 months since the initial major releases were made, so I wondered how much longer it will take for them to be in sync.
Thanks again!
@ky1ejs this issue, remark-gfm with react-markdown is resolved, and has been for a while.
There are 500+ unified packages being updated so:
- Be patient
- Be specific on which you are using
You (@ky1ejs) appear to be asking about remark-gfm with mdx, that is in progress currently, you can track the progress towards the next mdx release in the mdx repo itself.
Thanks @ChristianMurphy, great breakdown, much appreciated! 🙏🏼 🙏🏼
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 |
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.
remark-preset-prettier doesn't have any dependencies.
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
remark-gfm@4.0.0
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.
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.
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"
}
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?
It is fixed by now. See https://github.com/remarkjs/react-markdown/releases/tag/9.0.0. The comment you linked precedes that release.
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/mdast-util-gfm-table@2.0.0/node_modules/mdast-util-gfm-table/lib/index.js:123:17)
at compile (file:// /node_modules/.pnpm/mdast-util-from-markdown@1.3.1/node_modules/mdast-util-from-markdown/lib/index.js:352:40)
at fromMarkdown (file:// /node_modules/.pnpm/mdast-util-from-markdown@1.3.1/node_modules/mdast-util-from-markdown/lib/index.js:187:29)
at parser (file:// /node_modules/.pnpm/remark-parse@10.0.2/node_modules/remark-parse/lib/index.js:18:12)
at Function.parse (file:// /node_modules/.pnpm/unified@10.1.2/node_modules/unified/lib/index.js:273:12)
at executor (file:// /node_modules/.pnpm/unified@10.1.2/node_modules/unified/lib/index.js:393:31)
at new Promise (<anonymous>)
at Function.process (file:// /node_modules/.pnpm/unified@10.1.2/node_modules/unified/lib/index.js:380:14)
at process (file:// /node_modules/.pnpm/@mdx-js+mdx@2.3.0/node_modules/@mdx-js/mdx/lib/util/create-format-aware-processors.js:50:22)
at onload (file:// /node_modules/.pnpm/@mdx-js+esbuild@2.3.0_esbuild@0.18.20/node_modules/@mdx-js/esbuild/lib/index.js:151:22)
at requestCallbacks.on-load ( /node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild/lib/main.js:1434:28)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at handleRequest ( /node_modules/.pnpm/esbuild@0.18.20/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"
}
}
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.
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_modulesand your lockfile, and runningnpm 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/mdast-util-frontmatter@1.0.1/node_modules/mdast-util-frontmatter/lib/index.js:69:14)
at compile (file:// /apps/docs/node_modules/.pnpm/mdast-util-from-markdown@2.0.0/node_modules/mdast-util-from-markdown/lib/index.js:337:40)
at fromMarkdown (file:// /apps/docs/node_modules/.pnpm/mdast-util-from-markdown@2.0.0/node_modules/mdast-util-from-markdown/lib/index.js:173:27)
at parser (file:// /apps/docs/node_modules/.pnpm/remark-parse@11.0.0/node_modules/remark-parse/lib/index.js:33:12)
at Function.parse (file:// /apps/docs/node_modules/.pnpm/unified@11.0.4/node_modules/unified/lib/index.js:668:12)
at executor (file:// /apps/docs/node_modules/.pnpm/unified@11.0.4/node_modules/unified/lib/index.js:734:40)
at new Promise (<anonymous>)
at Function.process (file:// /apps/docs/node_modules/.pnpm/unified@11.0.4/node_modules/unified/lib/index.js:720:47)
at process (file:// /apps/docs/node_modules/.pnpm/@mdx-js+mdx@2.3.0/node_modules/@mdx-js/mdx/lib/util/create-format-aware-processors.js:50:22)
at onload (file:// /apps/docs/node_modules/.pnpm/@mdx-js+esbuild@2.3.0_esbuild@0.18.20/node_modules/@mdx-js/esbuild/lib/index.js:151:22)
at requestCallbacks.on-load ( /apps/docs/node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild/lib/main.js:1434:28)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at handleRequest ( /apps/docs/node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild/lib/main.js:729:13)
SourceFetchDataError: {
"_tag": "HandledFetchDataError"
}
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.
Should this be reopened?
Downgrading to 3.0.1 fixes the problem for now.
This is not a bug. If you’re seeing this, it means some of your dependencies are outdated, but not all.