Customizing html.js
Gatsby uses a React component to server render the <head> and other parts of
the HTML outside of the core Gatsby application.
Most sites should use the default html.js shipped with Gatsby. But if you need
to customize your site’s html.js, copy the default one into your source
tree by running:
cp .cache/default-html.js src/html.jsAnd then making modifications as needed.
Required props
Note: the various props that are rendered into pages are required e.g.
headComponents, preBodyComponents, body, and postBodyComponents.
React Helmet
Also anything you render in the html.js component will not be made “live” in
the client like other components. If you want to dynamically update your
<head> we recommend using
React Helmet
Target container
If you see this error: Uncaught Error: _registerComponent(...): Target container is not a DOM element. it means your html.js is missing the required
“target container”. Inside your <body> you must have a div with an id of
___gatsby like:
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
