React 16: Warning: Expected server HTML to contain a matching in <body>
Since upgrading to React 16 I get this error message:
warning.js:33 Warning: Expected server HTML to contain a matching in .
-
If you're using Server Side Rendering like NextJS, delete recent code and compare if you've tried to access a variable directly inside of Component scope where DOM is not guaranteed yet. For me, it was:
import { i18n } from 'i18n'
export default function SomeComponent() {
const initLanguage = i18n.language <---- causing error
return ...
}
If you need to access such properties, access it within useEffect, so as to make sure that document is already established by then. It is kinda equivalent to componentDidMount():
import { i18n } from 'i18n'
import { useEffect, useState } from 'react'
export default function SomeComponent() {
const [initlanguage, setInitLanguage] = useState('en')
useEffect(() => setInitLanguage(i18n.language), [])
return ...
}
- 热议问题
Since upgrading to React 16 I get this error message:
warning.js:33 Warning: Expected server HTML to contain a matching in .
-
If you're using Server Side Rendering like NextJS, delete recent code and compare if you've tried to access a variable directly inside of Component scope where DOM is not guaranteed yet. For me, it was:
import { i18n } from 'i18n' export default function SomeComponent() { const initLanguage = i18n.language <---- causing error return ... }If you need to access such properties, access it within useEffect, so as to make sure that
documentis already established by then. It is kinda equivalent to componentDidMount():import { i18n } from 'i18n' import { useEffect, useState } from 'react' export default function SomeComponent() { const [initlanguage, setInitLanguage] = useState('en') useEffect(() => setInitLanguage(i18n.language), []) return ... }
加载中...
- 热议问题