fix(gatsby): rehydration issue in Dev404Page with DEV_SSR (#30581)

Co-authored-by: Lennart <lekoarts@gmail.com>
gatsbyjs · May 3, 2021 · 5005588 · 5005588
1 parent 257de93
commit 5005588
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js b/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js
@@ -19,6 +19,7 @@ class Dev404Page extends React.Component {
     const initialPagePathSearchTerms = urlState.filter ? urlState.filter : ``
 
     this.state = {
+      hasMounted: false,
       showCustom404: false,
       initPagePaths: pagePaths,
       pagePathSearchTerms: initialPagePathSearchTerms,
@@ -32,6 +33,12 @@ class Dev404Page extends React.Component {
     this.handleSearchTermChange = this.handleSearchTermChange.bind(this)
   }
 
+  componentDidMount() {
+    this.setState({
+      hasMounted: true,
+    })
+  }
+
   showCustom404() {
     this.setState({ showCustom404: true })
   }
@@ -78,6 +85,10 @@ class Dev404Page extends React.Component {
   }
 
   render() {
+    if (!this.state.hasMounted) {
+      return null
+    }
+
     // Detect when the query returns the default function node that's added when functions
     // are *not* enabled. That seems the simplest way to communicate whether
     // functions are enabled or not to this page.