7+: Can't parse links

[Kureev]

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

[wooorm]

Hey! See the syntax highlighting above: you’re doing it wrong.

You should pass a string, not react children.

Check that markdown in the demo: it works fine: https://remarkjs.github.io/react-markdown/.

Also: how do you get that error? Please provide more info on that error.

[github-actions]

Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.

See our support docs for how and where to ask questions.

Thanks,
— bb

[Kureev]

Hi @wooorm,

Thanks for such a swift response. Not sure if I understand the difference between using a string vs using children (in my case I can ensure it is a string), but even if I do it according to the link you mentioned e.g.

<ReactMarkdown>{`* Follows [CommonMark](https://commonmark.org)`}</ReactMarkdown>

it throws the same error:

ast-to-react.js:392 Uncaught TypeError: Cannot convert undefined or null to object
    at hasOwnProperty (<anonymous>)
    at addProperty (ast-to-react.js:392:11)
    at toReact (ast-to-react.js:188:9)
    at childrenToReact (ast-to-react.js:133:21)
    at toReact (ast-to-react.js:197:20)
    at childrenToReact (ast-to-react.js:133:21)
    at toReact (ast-to-react.js:197:20)
    at childrenToReact (ast-to-react.js:133:21)
    at ReactMarkdown (react-markdown.js:116:19)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at HTMLUnknownElement.sentryWrapped (helpers.ts:98:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:74)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

[wooorm]

Are you sure your example is everything? Sounds like you are using plugins?

Our tests work fine.
The playground works fine (see previous). It should work.

[wooorm]

If you’re migrating and updating, perhaps nuke your package locks and install again?

[Kureev]

Are you sure your example is everything? Sounds like you are using plugins?

Nope, why?

If you’re migrating and updating, perhaps nuke your package locks and install again?

Did rm -rf .parcel-cache node_modules yarn.lock, no luck. 6.x works fine 🤷‍♂️ . I mean there are no specific use-cases for me to use 7.x+, so I guess I might just revert to 6.x and live my life happily.

I do suspect it might be related to parcel or something. If I look deeper into the stack trace, I've got somewhat like this:

It seems hastToReact gives 0 and info.property is "href". This is the place where it falls apart for me.
Not sure if that's relevant, but I think I'll stop investigating deeper at this step and revert to 6.x, not a biggie

[Kureev]

Okay, I couldn't resist and actually figured something out: it does work with parcel's prod build, but doesn't in parcel's dev build (no additional configuration is given for parcel)

[ChristianMurphy]

Are you sure your example is everything? Sounds like you are using plugins?

Nope, why?

Plugins could be injecting invalid content, or modifying links.

I do suspect it might be related to parcel or something.

That is very possible.
Build tools can over-optimistically optimize/change code and break things.
Usually with some configuration they will work again.

If I look deeper into the stack trace, I've got somewhat like this:

Without being able to replicate the issue, it's difficult to offer many meaningful suggestions.
Consider sharing a sandbox with a replication of the issue https://codesandbox.io/s/

[wooorm]

hastToReact exists and we don’t do anything with that. It’s an object from https://github.com/wooorm/property-information/blob/main/lib/hast-to-react.js.
Looks like parcel, or the minifier it uses, is messing it up

[Kureev]

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: parcel-bundler/parcel#9113.

Many thanks for your time!

[charIeszhao]

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>

[gao-sun]

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

[gmpetrov]

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>

Thx!
Btw it's

import 'property-information'
// not import from 'information-property';

[JuliaMerz]

The error manifested for me as unable to read href of undefined and this solution worked as well. Crazy workaround.

[AdamHG2411]

Same error message as Julia when using react-markdown v9.0.1 with remark-gfm v4.0.0 and trying to parse a URL or footnote. Importing property-information seems to have fixed it.

[wooorm]

Locking as there is no issue here.