react-markdown: 7+: Can't parse links

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

7.0.0+

Link to runnable example

No response

Steps to reproduce

Install react-markdown of version 7 or later.
Use following code to reproduce the error

import ReactMarkdown from 'react-markdown'

function App() {
  return (
    <ReactMarkdown>This is a [test](https://google.com)</ReactMarkdown>
  )
}

const root = createRoot(document.getElementById("root"))
root.render(<App />)

Expected behavior

Should render a link like in 6.x

Actual behavior

Cannot convert undefined or null to object

Runtime

Node v16

Package manager

yarn 1

OS

macOS

Build and bundle tools

Parcel

About this issue

Original URL
State: closed
Created a year ago
Comments: 17 (6 by maintainers)

Commits related to this issue

downgrade react-markdown to 6.0.3 to avoid crash when rendering links when bundling the app using parcel (vite storybook works fine using 8.0.7) see: https://github.com/remarkjs/react-markdown/issues... — committed to memalloc/dkat4 by memalloc a year ago

Most upvoted comments

Yeah, it seems like it drops the reference to hastToReact for whatever reason. Tried to modify code directly in node_modules and it seems if I retain the ref to hastToReact by logging it, everything works:

if (info.space && info.property) {
  console.log(hastToReact)
  props[
    own.call(hastToReact, info.property)
      ? hastToReact[info.property]
      : info.property
  ] = result
} else if (info.attribute) {
  props[info.attribute] = result
}

So, that said, it seems everything is correct with the library 😸 . Sorry for the false alarm, I’ll follow up in Parcel discussions: https://github.com/parcel-bundler/parcel/discussions/9113.

Many thanks for your time!

Kureev on Jun 27, 2023

Came across the exact same issue and we are also using parcel… Thanks for this ticket

Update: Here’s a workaround. Manually install property-information in your project, and import it where you import react-markdown. E.g.

import Markdown from 'react-markdown';
import 'information-property';

// then in tsx, it's working...
<Markdown>{content}</Markdown>

charIeszhao on Aug 11, 2023

Came across the exact same issue and we are also using parcel… Thanks for this ticket

Update: Here’s a workaround. Manually install property-information in your project, and import it where you import react-markdown. E.g.
import Markdown from 'react-markdown';
import from 'information-property';

// then in tsx, it's working...
<Markdown>{content}</Markdown>

Context: parcel@2.9.3, react-markdown@8.0.0

gao-sun on Aug 11, 2023