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:

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:

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: