Why the content is not rendering if it is part of the node?

[reypm]

I will take this comment borrow from here:

Promise support, from components, in React is very much WIP. For something like remarkjs/react-markdown#680 to land, that needs to happen first.

And I am trying to follow this suggestion (taken from the same answer):

create your own async component. You can use the components here to map custom elements (say my-directive to your fancy async component, and do async work there, not on the AST, but at render.

This is my solution (I have removed non-relevant code):

# PageInclude.tsx

const axios = require("axios").default;

const getApiData = async (sharedContentPath: string) => {
  const [cookies] = useCookies(["locale"]);
  const { axiosRequestUrl } = getApiVars(sharedContentPath, cookies.locale);

  const axiosClient = axios.create({
    baseURL: process.env.CONTENT_DOMAIN,
    proxy: false,
  });

  return await axiosClient.get(axiosRequestUrl);
};

const processPageInclude = async (node: any) => {
  const properties = node.properties || (node.properties = {});
  const pathName = window.location.pathname;
  const sharedContentPath = buildUrl(
    pathName,
    properties.attributes.id,
    properties.product
  );

  try {
    const response = await getApiData(sharedContentPath);
    return toHast(fromMarkdown(response.data.genericSection.body));
  } catch (error) {
    console.log("error", error);
  }
};

export default processPageInclude;

and this is how I am using this custom async plugin:

# Markdown.tsx
const ReactMarkDown = ({ content, metaData }: { content: any, metaData: MetaDataModel }) => {
  const data = content
    ?.replaceAll('&lt;', '<')
    ?.replaceAll('&gt;', '>')
    ?.replaceAll('&nbsp;', ' ')

  function remarkDirectiveCustomize(options: any) {
    return (tree: MdastRoot) =>
      visit(tree, 'containerDirective', (node) => {
        node.data ??= {}
        node.data.hName = 'container-directive'
        node.data.hProperties = {
          type: node.name,
          attributes: node.attributes,
          product: options[0]
        }
      })
  }

  function rehypeRenderDirective() {
    return (tree: HastRoot) =>
      visit(tree, { type: 'element', tagName: 'container-directive' }, (node) => {
        node.tagName = 'div'

        if (node.properties.type === 'page-include') {
          processPageInclude(node).then((result) => {
            node.children = result.children
           // this contains the processed markdown coming from the external source - see below
            console.log(node) 
          })
        }
      })
  }

  return (
    <ReactMarkdown
      remarkPlugins={[
        remarkGfm,
        remarkDirective,
        [remarkFrontmatter, ['yaml', 'toml']],
        remarkBreaks,
        [remarkMermaid],
        shortcodePlugin,
        [remarkDirectiveCustomize, [metaData?.id]]
      ]}
      rehypePlugins={[rehypeExternalLinks, rehypeSlug, rehypeRenderDirective]}
      remarkRehypeOptions={{ allowDangerousHtml: true }}
    >
      {data}
    </ReactMarkdown>
  )
}

export default ReactMarkDown

this is what console.log(node) prints out to the console:

{
  "type": "element",
  "tagName": "div",
  "properties": {
    "type": "page-include",
    "attributes": {
      "id": "domains-and-ips"
    },
    "product": "commerce"
  },
  "children": [
    {
      "type": "element",
      "tagName": "p",
      "properties": {},
      "children": (87) [{...},{...}], // ====> this is the markdown coming from the async call
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 6007,
          "offset": 6006
        }
      }
    }
  ],
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 2,
      "column": 6,
      "offset": 52
    }
  }
}

still I am not seeing any kind of content when the page render and no errors on the console. What else I am missing here?

[ChristianMurphy]

Howdy @reypm 🤠

remarkjs/react-markdown#680
...
And I am trying to follow this suggestion (taken from the same answer):

What suggestion? There is none in that issue.
Promises inside remark and rehype plugins are not supported in ReactMarkdown yet, period.
It may be supported in remarkjs/react-markdown#682 once all the discussion and code review is complete.

this is what console.log(node) prints out to the console:
still I am not seeing any kind of content when the page render and no errors on the console. What else I am missing here?

The console.log happens after the render has already completed.
When the render is actually running, the promise has not yet resolved, so there is no content.

---

Some solutions would include either of @wooorm's solutions in https://github.com/orgs/syntax-tree/discussions/104#discussioncomment-6471016
Your current example is neither of those two recommendations.

[reypm]

that's the weird part, no so much to check on here

[wooorm]

https://stackoverflow.com/questions/72055605/why-i-am-getting-this-error-error-failed-to-process-internal-error-entered-un

Looks like you are writing invalid typescript. Maybe good to use a linter?

[wooorm]

I don’t mind helping you with unified related stuff but this is more about how to program. I don’t have the time to teach how to do that currently. Please, when you hit an error, take the time to investigate/google/etc it yourself before asking me, thanks! :)

[reypm]

const reactNode = toJsxRuntime(transformedTree, {Fragment, jsx, jsxs, components: {/* … */}})

should components there have double curly braces? like:

const reactNode = toJsxRuntime(transformedTree, {Fragment, jsx, jsxs, components: {{/* … */}}})

[ChristianMurphy]

components is an object, objects use a single curly bracket.

[reypm]

@wooorm After fix the errors I was having before now I am getting a lot of errors (they are too long so I have attached them here). what has changed? Besides now I am using the suggested code a few more things:

const ReactMarkDown = async ({ content, metaData }: { content: any, metaData: MetaDataModel }) => { }

I need it to change this to async otherwise the following line cannot be executed:

const transformedTree = await processor.run(parseTree) // transformed hast tree.

instead of return the ReactMarkdown component as I was doing originally now I am just doing:

  return (
    {reactNode}
  )

But something is not ok since everything is failing and the page does not render, any thoughts?

localhost-1689777683891.log

[ChristianMurphy]

@reypm again please search the error.
The error in the log is not from react-markdown or remark.
It is Next.js and React telling you, you returned a promise (async) where a component was expected.

Most likely from

const ReactMarkDown = async ({ content, metaData }: { content: any, metaData: MetaDataModel }) => { }

[reypm]

Hmm but if I don't do that how is suppose that I will be able to run the following line? 🤔

const transformedTree = await processor.run(parseTree) // transformed hast tree.

[ChristianMurphy]

There are a lot of ways, search "promise in react component" in your search engine of choice.
A combo of useEffect and useState is common, but there are many other options.

[reypm]

hey guys, I did manage to get things partially working, here are the new changes:

const ReactMarkDown = ({ content, metaData }: { content: any, metaData: MetaDataModel }) => {
  // temporary fix till AEM addresses these characters
  const data = content
    ?.replaceAll('&lt;', '<')
    ?.replaceAll('&gt;', '>')
    ?.replaceAll('&nbsp;', ' ')

  function rehypeRenderDirective() {
    return (tree: HastRoot) =>
      visit(tree, { type: 'element', tagName: 'container-directive' }, (node) => {
        node.tagName = 'div'

        // @ts-ignore
        if (node.properties.type === 'page-include') {
          processPageInclude(node).then((result) => {
            node.children = result.children

            // ===> this output nothing, why? is because this is never being call?
            console.log('node', node)
          })
        }
      })
  }

  const processor = unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkFrontmatter, ['toml', 'yaml'])
    .use(remarkBreaks)
    .use(remarkMermaid)
    .use(remarkDirective)
    .use(shortcodePlugin)
    .use(remarkDirectiveCustomize, [metaData?.id])
    .use(rehypeExternalLinks)
    .use(rehypeSlug)
    .use(rehypeRenderDirective)

  const parseTree = processor.parse(toHast(fromMarkdown(data))) // mdast input tree
  const [transformedTree, setTransformedTree] = useState('')

  useEffect(() => {
    const getTransformedTree = async () => {
      return await processor.run(parseTree) // transformed hast tree.
    }
    getTransformedTree().then((data) => {
      setTransformedTree(data)
    })
  }, [])

  // => this output hast, but it does not contain the content coming from page-include because apparently it never gets call
  console.log(transformedTree)

  const reactNode = toJsxRuntime(transformedTree, { Fragment, jsx, jsxs, components: {} })

  return (<></>)
}

export default ReactMarkDown

I added some comments inline, thoughts? what could I be missing here?

also if I try to render {reactNode} I end up with the following error:

Error: Objects are not valid as a React child (found: object with keys {reactNode}). If you meant to render a collection of children, use an array instead.

Note: I'm not justifying myself but apologies for this long back and forth, I am still learning React and I am coming from PHP

[ChristianMurphy]

Generally speaking, if you want to parse, transform, and serialize.
Do that all in one step, with unified.process https://github.com/unifiedjs/unified#overview

// ===> this output nothing, why? is because this is never being call?

have you logged the full AST to check that it does in fact contain a directive which meets all your expectations?
Have you checked processPageInclude to make sure that it does resolve the promise?
And make sure your plugin itself is Promise based, it currently appears to resolve before the Promise or async does, see syntax-tree/unist-util-visit-parents#8 (comment) for an example of how to make an async visitor.