Otra solución es el uso de ̶ p̶r̶o̶c̶e̶s̶s̶.̶b̶r̶o̶w̶s̶e̶r ̶ a poco Ejecutar ̶ su comando durante la representación en el cliente solo lado.

Pero el objeto de process ha quedado obsoleto en Webpack5 y también en NextJS, porque es una variable de NodeJS solo para el lado del back-end.

Así que tenemos que usar el objeto de la window trasera del navegador

 if (typeof window != "undefined") { // Client-side-only code }

Otra solución es usar el gancho de reacción para reemplazar el componentDidMount

 useEffect(() => { // Client-side-only code })

Mueva el código de componentWillMount() a componentDidMount() :

 componentDidMount() { console.log('window.innerHeight', window.innerHeight); }

En Next.js, componentDidMount() se ejecuta solo en el cliente donde estarán disponibles la window y otras API específicas del navegador. De la wiki de Next.js :

Next.js es universal, lo que significa que ejecuta el código primero del lado del servidor y luego del lado del cliente. El objeto de ventana solo está presente en el lado del cliente, por lo que si es absolutamente necesario tener acceso a él en algún componente de React, debe colocar ese código en componentDidMount. Este método de ciclo de vida solo se ejecutará en el cliente. También es posible que desee comprobar si no hay alguna biblioteca universal alternativa que pueda satisfacer sus necesidades.

En la misma línea, componentWillMount() quedará obsoleto en la versión 17 de React, por lo que será potencialmente inseguro de usar en un futuro muy cercano

si

Si usa React Hooks , puede mover el código al Effect Hook :

 import * as React from "react"; export const MyComp = () => { React.useEffect(() => { // window is accessible here. console.log("window.innerHeight", window.innerHeight); }, []); return (<div></div>) }

El código dentro useEffect solo se ejecuta en el cliente (en el navegador), por lo que tiene acceso a la window .