TypeError: Cannot read property '_documentProps' of null
Cela est jeté dans la méthode de rendu de Head
:
render() {
var {
styles,
ampPath,
inAmpMode,
assetPrefix,
hybridAmp,
canonicalBase,
__NEXT_DATA__,
dangerousAsPath,
headTags
} = this.context._documentProps;
Fonctionne bien en développement, mais lors de la construction et de l'exécution de la version de construction, il se bloque
Étapes pour reproduire le comportement, veuillez fournir des extraits de code ou un référentiel :
Je comprends que cela puisse être lié à ma configuration. J'utilise typescript et nextjs.
Aucune erreur renvoyée.
L'application fonctionne bien dans 9.0.4 mais j'ai une dépendance qui lance un avertissement de vulnérabilité... et ne devrait pas être une grosse mise à jour (je suppose).
Le problème apparaît toujours dans le premier élément à l'intérieur du document dans pages/_document. Dans ce cas, c'est "Head" mais si je supprime Head, il s'affiche dans "Main". D'une manière ou d'une autre, ce contexte n'est pas rempli.. uniquement lors de la construction (fonctionne en développement)
Voici le getInitialProps de ma page _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();
}
}
Il est fondamentalement impossible de vous aider / dire à quoi cela se rapporte car aucune reproduction n'est fournie.
Utilisez-vous Apollo ?
Semble avoir corrigé cela avec un refactor du code _document.tsx :
const originalRenderPage = context.renderPage;
...
try {
context.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});
const initialProps = await BaseDocument.getInitialProps(context);
...
proche de ce qui est dans les exemples.
Se heurter à d'autres problèmes lors de la mise à jour de 9.0.4 à 9.1.4.. Cela semble être une mise à jour non triviale pour une raison quelconque.
Merci pour les indications en tout cas.
Je sais qu'il est difficile d'aider sans un certain repo de reproduction, mais parfois des problèmes de popup pour d'autres raisons et ne se montrent pas dans un scénario de bonjour. app a bien sûr un autre code qui pourrait envoyer des choses indésirables..c'est toujours possible. essayer de déboguer et de fournir toujours autant d'informations que possible.
Merci pour toute l'aide monsieur. tu es génial
J'ai rencontré le même problème, je ne sais pas si c'est lié. Mais, le problème a été causé en raison d'une importation incorrecte.
Au lieu de import { Head } from 'next/document'
, il devrait s'agir de import Head from 'next/head'
, si quelqu'un essaie d'importer Head
à l'intérieur de pages individuelles, et non dans _document
, comme indiqué dans la documentation .
@ Shub1427 Tu es une beauté, merci !
@Shub1427 ️
Wow, cela m'a sauvé après presque 2 jours de blocage. Je pense que cela devrait certainement être mieux documenté.
Pour toute personne utilisant import Head from 'next/head'
notez que toutes les balises semblent n'être rendues que dans le client, PAS sur le serveur
je reçois cette erreur
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
dans mon _document.js lors du déploiement mais cela fonctionne bien localement.
@sibasishm J'ai rencontré cette erreur et la solution était de faire this.context
au lieu de this.context._documentProps
.
Pour plus d'informations → https://github.com/vercel/next.js/discussions/16162
Mais je reçois une autre erreur maintenant Type error: Property 'files' does not exist on type 'DocumentProps'.
que je fais const { assetPrefix, files } = this.context
maintenant :(
Commentaire le plus utile
J'ai rencontré le même problème, je ne sais pas si c'est lié. Mais, le problème a été causé en raison d'une importation incorrecte.
Au lieu de
import { Head } from 'next/document'
, il devrait s'agir deimport Head from 'next/head'
, si quelqu'un essaie d'importerHead
à l'intérieur de pages individuelles, et non dans_document
, comme indiqué dans la documentation .