Search code examples
javascripthtmlreactjscomputer-sciencemern

TypeError: Failed to fetch REACT JS


So I am writing an application and I am trying to sign up a user when I enter correct email address like [email protected] I gives me TypeError: Failed to fetch but when I input invalid email like "user" it run correctly. Below is the SignUp.js Code

const SignUp =()=>{
    const history=useHistory()
    const [name,setName]=useState("")
    const [password,setPassword]=useState("")
    const [email,setEmail]=useState("")
    const PostData =()=>{
        // if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email)){ 
        //   M.toast({html: 'Invalid email', classes: '#0d47a1 blue darken-4'})
        //  return
        // }
        fetch("/signup",{
                method:"post",
                headers:{
                    "Content-Type":"application/json",
                    'Accept': 'application/json'
                },
                body:JSON.stringify({
                    name,
                    email,
                    password
                })
            }).then(res=>res.json())
            .then(data=>{
                console.log(data)
                if(data.error){
                    M.toast({html: data.error, classes: '#0d47a1 blue darken-4'});
                }
                else{
                    // M.toast({html: data.message, classes: '#0d47a1 blue darken-4'});
                    history.push('/signin')
                }
            }).catch(err=>{
                console.log(err)
            })
    }

AND BELOW IS MY signup.js (server side code)

router.post("/signup", (req, res) => {
    const { name, email, password } = req.body
    if (!email || !password || !name) {
        return res.status(422).json({ error: "Please add all the fields" })
    }
    User.findOne({ email: email })
        .then((savedUser) => {
            if (savedUser) {
                return res.status(422).json({ error: "User Already Exists" })
            }
            bcrypt.hash(password, 12)//default is 10
                .then(hashedpassword => {
                    const user = new User({
                        email,
                        password:hashedpassword,
                        name
                    })
                    user.save()
                        .then(user => {
                            console.log(user)
                            res.json({ message: 'User Joined BigBrains' })
                        })
                        .catch(err => {
                            console.log(err)
                        })
                })

        }).catch(err => {
            console.log(err)
        })
})

I have checked my backend via Postman it is running correct. But when I run it through client side (front end) it gives me error on correct data input.

Kindly help. I am new to development but I know my logic is correct I don't know why I am getting this error ERRORSNIP


Solution

  • Thankyou. I have solved my question I was making invalid network address I have uninstalled node modules and npm install it again and everything w