Fix some gatsby SSR mismatch issues
Luke Karrys committed
Oct 18, 2023 at 14:11 UTC
69cedcf5266438ca2a6d4511f7a95f053ca9bd28
4 files changed
+11
-9
gatsby-config.js
+3
@@ -59,6 +59,9 @@ module.exports = {
59
lang: 'en',
60
imageUrl: 'https://user-images.githubusercontent.com/29712634/81721690-e2fb5d80-9445-11ea-8602-4b2294c964f3.png',
61
},
62
+ flags: {
63
+ DEV_SSR: !!process.env.DEV_SSR,
64
+ },
65
plugins: [
66
{
67
resolve: 'gatsby-plugin-styled-components',
src/hooks/use-search.js
+1
@@ -85,6 +85,7 @@ function useSearch() {
85
}, [query])
86
87
const combobox = useCombobox({
88
+ id: 'search-box',
89
// We don't need Downshift to keep track of a selected item because as
90
// soon as an item is selected we navigate to a new page.
91
// Let's avoid any unexpected states related to the selected item
src/page.js
+3
-3
@@ -75,12 +75,12 @@ const GlobalStyles = createGlobalStyle`
75
}
76
`
77
78
-const PageElement = ({element, props}) => {
78
+const PageElement = ({element, props, ...rest}) => {
79
const page = {
80
pageContext: props.pageContext,
81
frontmatter: props.pageContext?.frontmatter || {},
82
location: props.location,
83
- path: props.path,
83
+ path: props.location.pathname,
84
slugger: new Slugger(),
85
}
86
return (
@@ -95,7 +95,7 @@ const PageElement = ({element, props}) => {
95
<Box sx={{display: ['none', null, null, 'block']}}>
96
<Sidebar />
97
</Box>
98
- {React.createElement(getLayout(props), props, element)}
98
+ {React.createElement(getLayout(page), {key: 'layout', ...props}, element)}
99
</Box>
100
</Box>
101
</PageProvider>
src/root.js
+4
-6
@@ -1,6 +1,6 @@
1
import React from 'react'
2
import {MDXProvider} from '@mdx-js/react'
3
-import {SSRProvider, ThemeProvider, theme} from '@primer/react'
3
+import {ThemeProvider, theme} from '@primer/react'
4
import deepmerge from 'deepmerge'
5
import * as Components from './mdx'
6
import {NPM_RED} from './constants'
@@ -54,11 +54,9 @@ const components = {
54
}
55
56
const RootElement = ({element}) => (
57
- <SSRProvider>
58
- <MDXProvider components={components}>
59
- <ThemeProvider theme={npmTheme}>{element}</ThemeProvider>
60
- </MDXProvider>
61
- </SSRProvider>
57
+ <MDXProvider components={components}>
58
+ <ThemeProvider theme={npmTheme}>{element}</ThemeProvider>
59
+ </MDXProvider>
60
)
61
62
export default RootElement