Trouble with parsing basic markdown in react

[fegigy1]

Dear Team,

I am ` beginner to the markdown world. I am trying to use markdoc in my react application (with typescript) . I am facing a basic issue of parsing simple markdown content. I am following below example to setup but my application uses with React 17 for some specific reasons.

https://markdoc.io/docs/examples/react

Below is my markdown file :

	# Test H1
	## Test H2

I am using below code to parse markdown file but I am not getting the content with expected tags. Could someone help me if I am missing anything here?

Server side :

  const document = fs.readFileSync(CONTENT_DIR + "/test.md", "utf-8");
  const ast = Markdoc.parse(document);
  content = Markdoc.transform(ast, {});
  return res.json(content);

Client side :

	const content = await response.json();
	return Markdoc.renderers.react(content, React, {}) as any;

Note: When I see AST all the nodes have tags undefined.

Any help would be appreciated.

Thanks.

[mfix-stripe]

Hey @fegigy1, you ran into the issue described here: #82, sorry about that.
We are currently looking into the fix and hope to have it up shortly.

You can fix the issue above by removing the indentation:

# Test H1
## Test H2

[fegigy1]

Thank you for the reply @mfix-stripe. But unfortunately removing indentation is also not working.

[mfix-stripe]

@fegigy1 could you share a reproduction of it not working without indentation? I'm certain regular headings work:

[fegigy1]

Sure @mfix-stripe . I have observed that the output is rendered correct with React 18 but not with React 17. PFB my configurations and outputs if it helps to figure out something. TIA.

[mfix-stripe]

Ahh yes, @fegigy1, the example above is based on React 18, as you can see here: https://github.com/markdoc/docs/blob/main/examples/react-nodejs/package.json#L10-L11

If you want to use React 17, I think you just need to adjust a couple create-react-app things, but that is entirely separate from Markdoc. Markdoc does not depend on any specific React version.