Next.js: TypeError: no se puede leer la propiedad '_documentProps' de null
Informe de error
Describe el error
TypeError: Cannot read property '_documentProps' of null
Esto se lanza en el método de renderizado de Head :
render() {
var {
styles,
ampPath,
inAmpMode,
assetPrefix,
hybridAmp,
canonicalBase,
__NEXT_DATA__,
dangerousAsPath,
headTags
} = this.context._documentProps;
Funciona bien en desarrollo, pero al compilar y ejecutar la versión de compilación se bloquea
Reproducir
Pasos para reproducir el comportamiento, proporcione fragmentos de código o un repositorio:
Entiendo que esto podría estar relacionado con mi configuración. Estoy usando mecanografiado y nextjs.
Comportamiento esperado
No arrojó ningún error.
Información del sistema
- SO: macOS
- Navegador (si corresponde) cromado (cualquiera)
- Versión de Next.js: 9.1.4
Contexto adicional
La aplicación funciona bien en 9.0.4 pero tengo una dependencia que está lanzando una advertencia de vulnerabilidad ... y no debería ser una gran actualización (asumí).
El problema siempre se muestra en el primer elemento dentro del Documento en páginas / _document. En este caso es "Head", pero si elimino Head, se muestra en "Main". De alguna manera, este contexto no se llena ... solo cuando se construye (funciona en desarrollo)
Esta es la getInitialProps de mi página _document:
public static async getInitialProps(context: CustomDocumentContext) {
const sheet = new ServerStyleSheet();
const renderPage = context.renderPage;
try {
context.renderPage = () => {
const enhancer = App => props => {
return sheet.collectStyles(<App {...props} />);
};
return renderPage(enhancer);
};
const initialProps: any = await BaseDocument.getInitialProps(context);
const { language, locale, localeData } = context.req;
return {
...initialProps,
language,
locale,
localeData,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
// @ts-ignore
sheet.seal();
}
}
joaogarin
Todos 10 comentarios
Es básicamente imposible ayudarlo / decir con qué se relaciona, ya que no se proporciona reproducción.
timneutkens
en 8 dic. 2019
¿Estás usando Apollo?
timneutkens
en 8 dic. 2019
Parece haber solucionado esto con una refactorización del código _document.tsx:
const originalRenderPage = context.renderPage;
...
try {
context.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});
const initialProps = await BaseDocument.getInitialProps(context);
...
cerca de lo que está en los ejemplos.
Me encontré con otros problemas al actualizar de 9.0.4 a 9.1.4 ... Esta parece ser una actualización no trivial por alguna razón.
Gracias por los consejos de todos modos.
Sé que es difícil ayudar sin un repositorio de reproducción, pero a veces aparecen mensajes emergentes por otras razones y no se muestran en un escenario de hola mundo. La aplicación tiene, por supuesto, otro código que podría enviar cosas no deseadas ... eso ofc siempre es posible. tratando de depurar y proporcionar la mayor cantidad de información posible siempre.
Gracias por toda la ayuda señor. eres impresionante 👍
joaogarin
en 9 dic. 2019
Enfrenté el mismo problema, no estoy seguro de si esto está relacionado. Pero el problema se debió a una importación incorrecta.
En lugar de import { Head } from 'next/document' , debería ser import Head from 'next/head' , si alguien está intentando importar Head dentro de páginas individuales, y no en _document , como se indica en los documentos .
phoenisx
en 9 feb. 2020
@ Shub1427 ¡Eres una belleza, gracias!
andresmejia3
en 6 mar. 2020
@ Shub1427 ❤️
Nases
en 9 mar. 2020
Vaya, esto me salvó después de casi 2 días de estar estancado. Creo que esto definitivamente debería estar mejor documentado.
adrianmcli
en 5 abr. 2020
Para cualquiera que use import Head from 'next/head' tenga en cuenta que todas las etiquetas parecen estar solo en el cliente, NO en el servidor
xe4me
en 20 jul. 2020
Estoy recibiendo este error
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
en mi _document.js en la implementación pero funciona bien a nivel local.
sibasishm
en 31 ago. 2020
@sibasishm Me enfrenté a ese error y la solución fue hacer this.context lugar de this.context._documentProps .
Para más información → https://github.com/vercel/next.js/discussions/16162
Pero recibo otro error ahora Type error: Property 'files' does not exist on type 'DocumentProps'. como estoy haciendo const { assetPrefix, files } = this.context ahora :(
deadcoder0904
en 13 sept. 2020
Temas relacionados
YarivGilad
·
3Comentarios
irrigator
·
3Comentarios
DvirSh
·
3Comentarios
havefive
·
3Comentarios
jesselee34
·
3Comentarios
Comentario más útil
Enfrenté el mismo problema, no estoy seguro de si esto está relacionado. Pero el problema se debió a una importación incorrecta.
En lugar de
import { Head } from 'next/document', debería serimport Head from 'next/head', si alguien está intentando importarHeaddentro de páginas individuales, y no en_document, como se indica en los documentos .