Im building a page on Gatsby, and the site uses Elastic Cloud, with their search ui components. Pretty nice library actually, but I have a major problem.
If I have one <SearchProvider> wrapping the <SearchBox> in the header and one to wrap the search result page they seem to live two different lives. And that's kind of expected when you think about it.
So, I thought to my self:
Aha, all search functionality must of course inherit from the same
<SearchProvider>!
So, I added it to gatsby-browser.js and gatsby-ssr.js, like so:
gatsby-browser.js
import './src/styles/global.scss';
import { SearchProvider } from '@elastic/react-search-ui';
import React from 'react';
import { searchDriver } from './src/components/search/search-driver';
export const wrapRootElement = ({ element }) => {
return <SearchProvider config={searchDriver()}>{element}</SearchProvider>
};
gatsby-ssr.js:
import { SearchProvider } from '@elastic/react-search-ui';
import React from 'react';
import { searchDriver } from './src/components/search/search-driver';
export const wrapRootElement = ({ element }) => {
return <SearchProvider config={searchDriver()}>{element}</SearchProvider>
};
Here comes the issue, it breaks the entire HTML server rendering. Instead I just get an "empty" DOM from the server. The page then renders using JS. So, the page look fine, but no HTML is rendered on the server, which is kind of the thing with Gatsby.
I have tried to fix this bug for multiple days, any help greatly appreciated!
Related links:
This is useful to set up any context providers that will wrap your application
https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement
The SearchProvider is a React wrapper around the Headless Core