React4xp client side render error

Enonic version: v7.10.3
OS: Mac OS

Hi,
Our team recently upgraded to lib-react4xp’s latest version v3.3.0, we have a thymleaf page with a react component that needs to be rendered in the client side. There is no error while building the project, but the following errors are thrown when trying to load the page.

ERROR c.e.l.r.ssr.resources.AssetLoader - ReferenceError: setTimeout is not defined

ERROR c.e.l.r.ssr.ServerSideRenderer - com.enonic.lib.react4xp.ssr.errors.RenderException: Couldn't init Renderer#14

ERROR c.e.lib.react4xp.html.HtmlInserter - ERROR: [ org.jdom2.input.JDOMParseException ] ...when trying to append error message HTML..

This is the react component in the page,

const chatbotReact = new React4xp('site/pages/page/chatbot')
        .setProps({
            chatBotUrl: assetUrl({ path: 'js/chatbot-config-posten.js' })
        })
        .setId('react-chatbot-page')

The thymleaf page’s body

 const body = render( resolve('page.html'), model)
    const pageContributions = {
        headEnd: inlineCSS(['/site/fragments/site-menu.css'])
    }

And finally the render

return {
        body: chatbotReact.renderBody({
            body,
            request: { ...request, mode: 'live' }
        }),
        headers: {
            "content-security-policy": ourCsp
        },
        pageContributions: chatbotReact.renderPageContributions({
            pageContributions: {
                headEnd: inlineCSS(['/site/fragments/site-menu.css'])
            },
            request: { ...request, mode: 'live' }
        })
    }

Please help with the errors and let me know if more info is required.

Thanks,
Arun

Try adding clientRender: true, to both renderBody and renderPageContributions.

https://github.com/enonic/site-market/blob/6b1e870ef7f13e370d0a69842bd9de4cf2989742/src/main/resources/site/pages/default/default.es6#L22-L33

@cwe, that link to site-market on GitHub doesn’t seem to work. Private repo?

I still get the errors even after using the flag clientRenderer: true

We probably need to look at the code, any chance you can make a support case?

1 Like