Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering

Question

I am making a website using Next.js and the above error is shown every time.

Don't know what is wrong in my code.

const Login = () => {
  const [userMsg, setUserMsg] = useState("");
  const [email, setEmail] = useState("");
  const router=useRouter();

  const handleOnChangeEmail = (e) => {
    e.preventDefault();
    setUserMsg("");
    console.log("event", e);
    const email = e.target.value;
    setEmail(email);
  };
  const handleLoginWithEmail = (e) => {
    e.preventDefault();
    if (email) {
      if (IsEmail.validate(email)){
        router.push("/")
        
      }else{
        setUserMsg("Enter a valid email address")
      }
      
    } else {
      //show usermssg
      setUserMsg("Enter an email address");
    }
  };
  return (
    
      
        NeoVest SignIn
      
      
        NeoVest
      
      
        
          
            Sign In
          
        
        
          
            
              Email
            
            
            
              {userMsg}
            
          
          
            
          
        
      
    
  );
};

Another error shown is due to some suspense boundary causing root to switch to client side rendering :

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

I am also using Tailwind if that information is important.

user_12066151 · Answer

If you would look at the console you would see a warning.

Warning: validateDOMNesting(...):  cannot appear as a child of

So, to fix this you just have to move head out of the div and move it to a different higher component.

user_17202644 · Answer

The problem is this:


    NeoVest SignIn

To solve it, first import Head, and then, use it with Capital "H"

import Head from "next/head"


    NeoVest SignIn

user_5761080 · Answer

I verified some topics in my code. First, verified if in next.config.js was styled components declared.

reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },

In second, I checked if file babel ".babelrc" was created in root folder with this content:

{
  "presets": ["next/babel"],
  "plugins": ["styled-components"]
}

The error yet showed. Component by component I checked and more two errors was found. First, HTML errors like this:

Finally, I found an error in initializing component. In my case, I declared - incorrectly - a const items (object). The right way to execute this is using useState.


const Works = () => {
  const items =  [
    {
      id: 1,
      name: 'any name',
      src: 'srcpath'
    },
    {
      id: 2,
      name: 'any name 2',
      src: 'srcpath'
    },
    {
      id: 3,
      name: 'any name 3',
      src: 'srcpath'
    },
];

return(
   items.map((item, index) => {
     return(
        {item.name}
     )
   }
)
});


const Works = () => {
  const [ item, setItem ] = React.useState();
  React.useEffect(() => {
     setItem([
    {
      id: 1,
      name: 'any name',
      src: 'srcpath'
    },
    {
      id: 2,
      name: 'any name 2',
      src: 'srcpath'
    },
    {
      id: 3,
      name: 'any name 3',
      src: 'srcpath'
    },
   ]);
  }, []);
  
if(item)
return(
   items.map((item, index) => {
     return(
        {item.name}
     )
   }
)
});

user_4251578 · Answer

Time and randomness are two of the things that most commonly produce this

as discussed in Hydration errors - Text content does not match server-rendered HTML. #38263

Possible solution might be to use useEffect hook

// Example component with an error
import React from "react";

const AllNames = ["Ali", "Elisa", "Bella", "Carmen"];

const RandomUniqueNames = Array.from({ length: 4 }).map((_, index) => {
  let randomIndex = Math.floor(Math.random() * AllNames.length);
  console.log(randomIndex);
  let name = AllNames[randomIndex];
  return {
    name,
  };
});

export default function ModernNames() {
  return (
    
      ModernNames
      {RandomUniqueNames.map((name) => (
        {name.name}
      ))}
    
  );
}

// Example solution
import React, { useState, useEffect } from "react";

const AllNames = ["Ali", "Elisa", "Bella", "Carmen"];

export default function ModernNames() {
  const [randomNames, setRandomNames] = useState([]);
  useEffect(() => {
    const RandomUniqueNames = Array.from({ length: 4 }).map((_, index) => {
      let randomIndex = Math.floor(Math.random() * AllNames.length);
      console.log(randomIndex);
      let name = AllNames[randomIndex];
      return {
        name,
      };
    });
    setRandomNames(RandomUniqueNames);
  }, []);
  return (
    
      ModernNames
      {randomNames.map((name, index) => (
        {name.name}
      ))}
    
  );
}

user_14633878 · Answer

You can try downgrading react version. Try react@17.

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering

5 Answers