Saturday, 9 April 2022

How to render React component inside JSF using javascript chunks?

I have interesting case where I have to put React component inside JSF part of business application. I tried to achieve that with <h:outputScipt> but without success.

I imported chunks from react component and put them like here:

enter image description here

Then I used <h:outputScript/> like this:

<ui:composition template="/templates/tempMain.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">
        <h:form id="AdditionalServiceTemplatesForm">
            <p:panel id="additionalServiceTemplatesPanel">
                <div id="ComponentName" style="background-color: white" class="container"></div>
                    <h:outputScript library="js" name="19.649a5d09.chunk.js"/>
                    <h:outputScript library="js" name="runtime-main.d6107f88.js"/>
                    <h:outputScript library="js" name="main.d73a6ff5.chunk.js"/>
                    <h:outputScript library="js" name="hello.js"/>
                <h:form>
                    <h:commandButton onclick = "showMessage();" />
                </h:form>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>

Normal javascript script hello.js (not chunk) is visible and is working but react component from chunks is not rendered. All I've got is empty jsf container.

Additionaly there is information in the console: enter image description here

Additionaly I tried to change relative paths in chunks from static/js to "resources/js" and "javax.faces.resource/js" and without any path. Nothing is working.

After compilation, sources looks like this:

enter image description here



from How to render React component inside JSF using javascript chunks?

No comments:

Post a Comment