Si usa ReactDOM.hydrate para iniciar la aplicación web, verá esta advertencia.

Si su aplicación no utiliza la representación del lado del servidor ( ssr ), utilice ReactDOM.render para comenzar.

Si está utilizando la representación del lado del servidor como NextJS, elimine el código reciente y compare si ha intentado acceder a una variable directamente dentro del alcance del componente donde DOM aún no está garantizado. Para mí, fue:

 import { i18n } from 'i18n' export default function SomeComponent() { const initLanguage = i18n.language <---- causing error return ... }

Si necesita acceder a dichas propiedades, acceda a ellas dentro de useEffect , para asegurarse de que el document ya esté establecido para entonces. Es un poco equivalente a componentDidMount() :

 import { i18n } from 'i18n' import { useEffect, useState } from 'react' export default function SomeComponent() { const [initlanguage, setInitLanguage] = useState('en') useEffect(() => setInitLanguage(i18n.language), []) return ... }

Si su código HTML es como

 <table> <tr>

puede obtener este error.
Para sortearlo, use la etiqueta <tbody> como

 <table> <tbody> <tr>

¡No olvides cerrar la(s) etiqueta(s)!