Since upgrading to React 16 I get this error message:
warning.js:33 Warning: Expected server HTML to contain a matching <div> in <body>.
What is generally causing this error message and how can it be fixed?
If you use ReactDOM.hydrate to start web application, you will see this warning.
If your application does not use server-side rendering (ssr), please use ReactDOM.render to start.
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 ...
}
If your HTML code is like
<table>
<tr>
you can get this error.
To get around it, use the <tbody> tag like
<table>
<tbody>
<tr>
Don't forget to close the tag(s)!