Gatsby’s wrapRootElement exists in both the browser and server side rendering APIs.
This means that you’ll want to add the wrapRootElement to both the gatsby-browser.js/ts file and to the gatsby-ssr.js/ts file.
This guide looks at the gatsby-ssr.js/ts file because once you know this one you can duplicate the code in the other file.
Note that the gatsby-browser.js/ts file and the gatsby-ssr.js/ts file must go in the same directory (the root) as the gatsby-config.js/ts file. Or it won’t work.
So here is an example gatsby-ssr.js/ts file which has the wrapRootElement customised.
The wrapRootElement is for providers. Putting other stuff in there beside provider definitions could cause a whiffy code smell.
gatsby-ssr.js
import CustomRoot from './wrap-root-element';
export const wrapRootElement = CustomRoot;
wrap-root-element.js (or could be .ts extension)
import React from 'react';
import { Provider } from 'jotai';
// chakra-ui
import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react';
// theme
import theme from './src/@chakra-ui/gatsby-plugin/theme';
const wrapRootElement = ({ element }) => (
<Provider>
<ChakraProvider theme={theme}>
<ColorModeProvider>{element}</ColorModeProvider>
</ChakraProvider>
</Provider>
);
export default wrapRootElement;
Updated 14-Jun-2023
I was today years old when I discovered in the @chakra-ui/gatsby-plugin documentation that you had to have the theme in a specific folder within the src folder. Or else you may as well not bother trying.
Last But Not Least
Oh, in case you were wondering, Jotai is a cool state management system which is easier to learn and use than Redux .
Chakra UI is a framework thingy to style up your website.
Both are sexy. Give them a try.