Quando clicko no botão novo deveria abrir uma janela de dialógo mas não abre e dá esse erro no console: widget for var 'teste' not available. o que pode ser ? 

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html 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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/templates/modeloSistema.xhtml">

	<ui:define name="menu">
		<ui:include src="/includes/menuPrincipal.xhtml"></ui:include>
	</ui:define>



	<ui:define name="conteudo">
		<h:form>
			<p:dataTable emptyMessage="Nenhum registro encontrado"
				value="#{MBFrabicante.itens}" var="item" paginator="true" rows="10">
				
				<f:facet name="header">
					Fabricante - listagem
				</f:facet>
				
				<p:column headerText="Código" sortBy="#{item.codigo}"
					filterBy="#{item.codigo}">
					<h:outputText value="#{item.codigo}" />
				</p:column>
				
				<p:column headerText="Descrição">
					<h:outputText value="#{item.descricao}"></h:outputText>
				</p:column>
				
				<f:facet name="footer">
				<p:commandButton value="Novo" onclick="PF('teste').show();" />
				</f:facet>
			</p:dataTable>
		</h:form>
	</ui:define>
	
	<p:dialog widgetVar="teste" resizable="false" header="Fabricante - Novo"
			modal="true" appendTo="@(body)">
		<h:form>
			<h:panelGrid columns="2">
				<p:outputLabel value="Descrição: "></p:outputLabel>
				<p:inputText size="30" maxlength="50" />
			</h:panelGrid>
			<h:panelGrid columns="2">
				<p:commandButton value="Gravar" />
				<p:commandButton value="Cancelar" onclick="PF('dlgFabNovo').hide();" />
			</h:panelGrid>
		</h:form>
	</p:dialog>

</ui:composition>