title: Warning: Did not expect server HTML to contain the text node " " in <div>. at div
body: <p>I have a next.js application that uses the context api. However i am having what appears to be a hydration issue? But im unsure how to fix it.</p>
  <blockquote>
  <p>next-dev.js?3515:32 Warning: Did not expect server HTML to contain the
  text node &quot; &quot; in .
  at div
  at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js:55:66)
  at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:35:72)
  at Loading
  at AppProvider (webpack-internal:///./src/contexts/app/AppContext.tsx:177:9)
  at MyApp (webpack-internal:///./src/pages/_app.tsx:47:27)
  at StyleRegistry (webpack-internal:///./node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
  at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
  at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:90:23)
  at Container (webpack-internal:///./node_modules/next/dist/client/index.js:331:9)
  at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:770:26)
  at Root (webpack-internal:///./node_modules/next/dist/client/index.js:891:27)</p>
  </blockquote>
  <p>The error suggests that it is something to do with my app context but im not sure what it is.</p>
  <p><strong>I have reproducible example of the code here.</strong></p>
  <p><a href="https://codesandbox.io/s/interesting-mendel-d4dlu" rel="nofollow noreferrer">https://codesandbox.io/s/interesting-mendel-d4dlu</a></p>
  <ol>
  <li>Login using 123, 123</li>
  <li>Refresh the page with the refresh button in the inbuilt codesandbox browser</li>
  </ol>
  <p>View the console log error</p>
  <p><strong>AppContext</strong></p>
  <pre><code>import React, { Component, ReactElement, createContext } from &quot;react&quot;;
  import { createTheme } from &quot;@mui/material/styles&quot;;
  import { IAuthenticateUser, Authenticate, VerifyAuthentication } from &quot;../../services/AuthService&quot;;
  import { Loading } from &quot;../../components/loading/Loading&quot;;
  
  export interface IAppProviderProps {}
  
  export interface IAppProviderState {
      user: any | null;
      token: string | null;
      setUser?: any;
      isAuthenticated?: boolean;
      setDarkMode?: any;
      theme: any;
      isLoading?: boolean;
  }
  
  const DEFAULT_THEME = createTheme({
      typography: {
          fontSize: 12,
      },
      palette: {
          mode: &quot;light&quot;,
          primary: {
              main: &quot;#212121&quot;,
          },
          secondary: {
              main: &quot;#fafafa&quot;,
          },
      },
  });
  
  const DARK_THEME = createTheme({
      typography: {
          fontSize: 12,
      },
      palette: {
          mode: &quot;dark&quot;,
          primary: {
              main: &quot;#212121&quot;,
          },
          secondary: {
              main: &quot;#fafafa&quot;,
          },
      },
  });
  
  const INITIAL_STATE: IAppProviderState = { user: null, token: null, theme: DEFAULT_THEME, isAuthenticated: false };
  
  export const AppContext = createContext(INITIAL_STATE);
  
  export class AppProvider extends Component&lt;IAppProviderProps, IAppProviderState&gt; {
      constructor(props: IAppProviderProps) {
          super(props);
  
          const data = this.getUser();
          if (data) {
              this.state = {
                  user: data.user,
                  token: data.token,
                  theme: INITIAL_STATE.theme,
                  isLoading: true,
              };
          } else {
              this.state = INITIAL_STATE;
          }
      }
  
      componentDidMount = async () =&gt; {
          if (this.state.token) {
              const isAuthenticated = await this.isUserAuthenticated(this.state.token);
              this.setState({ isAuthenticated: isAuthenticated, isLoading: false });
          }
      };
  
      setUser = async (payload: IAuthenticateUser): Promise&lt;boolean&gt; =&gt; {
          const response = await Authenticate(payload);
          if (response &amp;&amp; response.status === 200) {
              this.setState({
                  user: response.data.user,
                  token: response.data.token,
                  isAuthenticated: true,
              });
              return true;
          }
          return false;
      };
      setDarkMode = async (toggle: boolean): Promise&lt;void&gt; =&gt; {
          const theme = toggle ? DARK_THEME : DEFAULT_THEME;
          this.setState({
              theme: theme,
          });
      };
  
      componentDidUpdate = (prevProps: IAppProviderProps, prevState: IAppProviderState) =&gt; {
          if (this.state.user !== prevState.user || this.state.token !== prevState.token) {
              console.log(&quot;didupdate&quot;);
              this.syncUser();
          }
      };
  
      syncUser = () =&gt; {
          localStorage.setItem(&quot;token&quot;, JSON.stringify(this.state.token));
          localStorage.setItem(&quot;user&quot;, JSON.stringify(this.state.user));
      };
  
      getUser = () =&gt; {
          try {
              const user = localStorage.getItem(&quot;user&quot;);
              const token = localStorage.getItem(&quot;token&quot;);
  
              if (!user || !token) {
                  return null;
              }
  
              const response = {
                  user: JSON.parse(user),
                  token: JSON.parse(token),
              };
  
              return response;
          } catch (err) {
              return null;
          }
      };
  
      isUserAuthenticated = async (token: any): Promise&lt;boolean&gt; =&gt; {
          try {
              const response = await VerifyAuthentication(token);
              if (response.status !== 200) {
                  return false;
              }
  
              return true;
          } catch (err) {
              return false;
          }
      };
      render(): ReactElement {
          if (this.state.isLoading) {
              return &lt;Loading /&gt;;
          } else {
              return (
                  &lt;AppContext.Provider
                      value={{
                          theme: this.state.theme,
                          user: this.state.user,
                          setUser: this.setUser,
                          setDarkMode: this.setDarkMode,
                          token: this.state.token,
                          isAuthenticated: this.state.isAuthenticated,
                          isLoading: this.state.isLoading,
                      }}
                  &gt;
                      {this.props.children}
                  &lt;/AppContext.Provider&gt;
              );
          }
      }
  }
  </code></pre>