UI Layout Initialization Error PrimeFaces 6.2

Question

The following code works fine with PrimeFaces 6.0 and 6.1, but with 6.2 when I click on button Validate I see the dialog with the message:

/ UI Layout Initialization Error  
The center-pane element does not exist.  
The center-pane is a required element.

I Use: JSF 2.2, PrimeFaces 6.2, Tomcat 8.5.23

Is there something wrong with the code or the problem is in PrimeFaces 6.2 ?

Company.java

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import com.company.helper.MessagesHelper;

@ManagedBean(name = "company")
@ViewScoped
public class Company implements Serializable {

    private static final long serialVersionUID = -8386148997526982963L;

    private String regNumber;

    public void validateRegNumber() {
        if(regNumber == null || regNumber.equals("")) {
            MessagesHelper.addMessageError("Invalid Registration Number!");
        } else {
            MessagesHelper.addMessage("Registration Number is Valid!");
        }
    }

    public String getRegNumber() {
        return regNumber;
    }

    public void setRegNumber(String regNumber) {
        this.regNumber = regNumber;
    }
}

MessagesHelper.java

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

public class MessagesHelper {
    public static void addMessage(String summary) {
        addMessage(summary, null);
    }

    public static void addMessageError(String summary) {
        addMessageError(summary, null);
    }

    public static void addMessage(String summary, String detail) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, detail);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public static void addMessageError(String summary, String detail) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, summary, detail);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

validation.xhtml

<ui:composition 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" 
    template="../templates/template.xhtml">    
    <ui:define name="content">
        <h:form id="frmValidate">
            <p:growl id="msgs" showDetail="true" /> 
            <div class="ui-fluid">  
                <div class="ui-grid ui-grid-responsive">
                    <div class="ui-grid-row">
                        <p:outputLabel for="regNumber" value="Registration Number: "></p:outputLabel>                               
                        <p:inputText id="regNumber" styleClass="inputClass" value="#{company.regNumber}" />
                        <p:commandButton value="Validate" id="btnValidate" ajax="false" action="#{company.validateRegNumber()}" />  
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>

footer.xhtml

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html">
    <center>
        <h:outputText style="font-size:13" value="Company Name 2018" />
    </center>
</ui:composition>

header.xhtml

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 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">
    <center>
        <h:form id="formWelcome">
            <p:toolbar id="toolbarWelcome">
                <p:toolbarGroup align="left" styleClass="my-toolbar-group-left">
                    <h:outputText value="Project Name" />
                </p:toolbarGroup>
                <p:toolbarGroup align="right">
                    <p:outputLabel for="uname" value="Username:" />
                    <p:outputLabel id="uname" value=" myUserName" />
                </p:toolbarGroup>
            </p:toolbar>
        </h:form>
    </center>
</ui:composition>

menu.xhtml

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    <h:form>
        <p:panelMenu style="width:212px">
            <p:submenu label="Main Menu">
                <p:menuitem value="Submenu 1"/>
                <p:menuitem value="Submenu 2"/>
            </p:submenu>
        </p:panelMenu>
    </h:form>
</ui:composition>

template.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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"
    xmlns:f="http://java.sun.com/jsf/core" >

<f:view contentType="text/html" encoding="UTF-8">
  <h:head>
   <f:facet name="first">
       <link rel="shortcut icon" type="image/x-icon" href="#{resource['images/favicon.ico']}" />  
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
       <title>Project Name</title>
   </f:facet> 

    <f:facet name="middle">
        <h:outputStylesheet name="css/style.css" />
   </f:facet>
 </h:head>
   <h:body>
    <p:layout fullPage="true" resizeTitle="resize">
        <p:layoutUnit  position="north"  id="north" size="60" resizable="false">
            <ui:include src="header.xhtml" />
        </p:layoutUnit>

        <p:layoutUnit id="west" position="west" size="220" resizable="false" gutter="2" header="Actions" effect="slide" collapsible="true" >
            <ui:include src="menu.xhtml" />
        </p:layoutUnit>

         <p:layoutUnit id="center" styleClass="layoutUnitCenter" position="center" resizable="false">               
                <!-- For PrimeFaces <= 6.1 -->
                <!-- 
                    <p:messages id="msgs" showSummary="true" autoUpdate="true" />
                    <ui:insert name="content" />
                 -->

                <!-- For PrimeFaces == 6.2 -->
                <p:fragment>
                    <p:messages id="msgs" showSummary="true">
                        <p:autoUpdate />
                    </p:messages>
                </p:fragment>
                <ui:insert name="content" />
        </p:layoutUnit>

        <p:layoutUnit position="south" resizable="false" id="south" closable="false" collapsible="false">
            <ui:include src="footer.xhtml" />
        </p:layoutUnit>
    </p:layout>
    </h:body>
</f:view>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
                        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>Project</display-name>

    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>    
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
        <enabled>true</enabled>
        <async-supported>false</async-supported>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
</web-app>

Answer 1

There is a bug in PrimeFaces 6.2 that cause this issue.
The bug is reported and is resolved in PrimeFaces 6.2.1

More info can be found here: https://github.com/primefaces/primefaces/issues/3457

As melloware mention in the link above, adding the following code in web.xml solves this issue.

<context-param>
    <param-name>primefaces.MOVE_SCRIPTS_TO_BOTTOM</param-name>
    <param-value>true</param-value>
</context-param>