Rendering macros with react4xp

Help
1

Hi. I’m trying to get macros to work in a project using react4xp.
I’m testing with a simple macro called blockquote. When I get the HtmlArea content in the controller, I get this:

<p>rich text before macro</p>

[blockquote text="simple test"/]

<p>rich text after macro</p>

When I process this with portal.processHtml, I get this:

<p>rich text before macro</p>
<p><!--#MACRO _name="blockquote" text="simple test" _document="__macroDocument2" _body=""--></p>
<p>rich text after macro</p>

In the frontend, that is rendered with error, like this:

<div id="pages_default____error__" style="border:1px solid #8B0000; padding:15px; background-color:#FFB6C1">
    <div class="react4xp-error" style="1px solid #8B0000; padding:15px; background-color:#FFB6C1; margin-bottom:15px">
        <style>
            li,h2,p,a,strong,span { font-family:monospace; }
            h2 { font-size:17px }
            li,p,a,strong,span { font-size:12px }
            a,span.data { color:#8B0000; }
        </style>
        <h2 class="react4xp-error-heading">React4xp SSR error</h2>
        
        <p class="react4xp-error-entry"><span class="jsxpath">Entry jsxPath: <span class="data">site/pages/default/default</span></span><br><span class="id">ID: <span class="data">pages_default__</span></span></p>

    </div>
<div id="pages_default__">
    <div class="react4xp-error" style="1px solid #8B0000; padding:15px; background-color:#FFB6C1; margin-bottom:15px">
        <style>
            li,h2,p,a,strong,span { font-family:monospace; }
            h2 { font-size:17px }
            li,p,a,strong,span { font-size:12px }
            a,span.data { color:#8B0000; }
        </style>
        <h2 class="react4xp-error-heading">React4xp SSR error</h2>
        
        <p class="react4xp-error-entry"><span class="jsxpath">Entry jsxPath: <span class="data">site/pages/default/default</span></span><br><span class="id">ID: <span class="data">pages_default__</span></span></p>

    </div>
</div>)
			}</div>

Screenshot of what’s rendered:
image

It looks like react4xp is not rendering the macro properly. Is there a way to fix this? I’m already rendering with the “ssr: true” option.

2

Are you getting any error messages in the XP log (or browser console)?

Can you provide source code of your macro (descriptor and controller)?

3

I have this in my xp log:

Caused by: org.graalvm.polyglot.PolyglotException: Error: Can't render <Regions> without a 'regionsData' prop.
	at <js>.Regions(<eval>:78)
	at <js>.renderWithHooks(<eval>:5671)
	at <js>.renderIndeterminateComponent(<eval>:5744)
	at <js>.renderElement(<eval>:5959)
	at <js>.renderNodeDestructiveImpl(<eval>:6117)
	at <js>.renderNodeDestructive(<eval>:6089)
	at <js>.renderNode(<eval>:6272)
	at <js>.renderHostElement(<eval>:5655)
	at <js>.renderElement(<eval>:5965)
	at <js>.renderNodeDestructiveImpl(<eval>:6117)
	at org.graalvm.sdk/org.graalvm.polyglot.Value.invokeMember(Value.java:973)
	at org.graalvm.js.scriptengine/com.oracle.truffle.js.scriptengine.GraalJSScriptEngine.invokeMethod(GraalJSScriptEngine.java:558)
	... 181 more


ScriptException: org.graalvm.polyglot.PolyglotException: Error: Can't render <Regions> without a 'regionsData' prop.
in com.enonic.lib.react4xp.ssr.ServerSideRenderer.runSSR
Entry: 'site/pages/default/default'
Assets involved:
	runtime.js
	vendors.js
	templates.js
	site/pages/default/default.js
Failing call: 'SeedsReactReact4xp['site/pages/default/default'].default({"text":"text example"})'

SOLUTION TIPS: The previous error message may refer to lines in compiled/mangled code. To increase readability, you can try react4xp clientside-rendering or building react4xp with buildEnv = development or gradle CLI argument -Pdev. Remember to clear all cached behavior first (stop continuous builds, clear/rebuild your project, restart the XP server, clear browser cache).

Trying to make it work, I have made the macro as simple as possible:
blockquote.ts

import type { Enonic } from '@enonic/js-utils/types/Request'
import { render } from '/lib/enonic/react4xp'
import { assetUrl, getComponent, getContent, imageUrl } from '/lib/xp/portal'

export function macro (context) {
  const text = context.params.text
  const component = getComponent()

  const props = { text }

  return render(component, props, undefined, {})
}

blockquote.tsx

import React from 'react'

function BlockquotePart({ text }: { text: string }) {
  return <div>{text}</div>
}

export default (props) => <BlockquotePart {...props} />

blockquote.xml

<macro>
  <display-name>Blockquote</display-name>
  <description>Blockquote macro</description>

  <form>
    <input name="text" type="TextArea">
      <label>Text</label>
    </input>
  </form>
</macro>